css-float

问题 i am using left floating DIVs to simulate a two column layout (each div contains textfield to edit different data, like name, hobbies,...). So it should look like this 1 2 3 4 5 6 Now my div-boxes aren't always the same, since some DIVs have more elements than the other ones. Now my layout looks likes this 1 2 2 3 4 5 6 You can also see the effect on this example if you scale your so that only four or three colums are shown. E.g. if 4 columns are shown in a row there is much space between

问题 I have a server-side component that generates a fluid layout "toolbar" using DIV without fixed width, generating many A inside it. Then I need customize that layout to make all A tags auto fit to the parent width. But the number of children is variable and the parent's width isn't known (it auto fits itself to the window). I made some tests with this Fiddle: http://jsfiddle.net/ErickPetru/6nSEj/1/ But I can't find a way to make it dynamic (uncomment the last A tag to see how it ins't working,

问题 The question is simple and short: why does overflow: hidden; clear floating? I looked in to the w3 standard documentation and it did not imply anything. 回答1: Because you establish a new Block Formatting Context when using overflow with anything ofther then visible (link to the w3.org specs). 来源： https://stackoverflow.com/questions/4910075/why-overflow-hidden-clears-a-float

问题 I have created 25 boxes of random width and height, where width == height (as shown) $(document).ready(function(e) { for (var count = 0; count < 5; count++) { for (var iter = 0; iter < 5; iter++) { $(".content").append("<div id='" + count + "_" + iter + "' class='box'><p>" + count + "_" + iter + "</p></div>"); $(".content div:last").width(Math.round((Math.random() * 100) + 50)); $(".content div:last").height($(".content div:last").width()); } } }); .box { background: #FF0004; margin: 10px;

问题 I'm wondering if there is any way do have text in a floating div gain ellipsis when the parent div and neighboring div don't allow enough room. For example: <style> .parent-div { width: 100%; border: 1px; padding: 4px; } .text-div { float: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icon-div { float: left; } </style> <div class="parent-div"> <div class="text-div">This is text I'd like to truncate when space doesn't permit</div> <div class="icon-div">X</div> </div

问题 As I understand float:left , it will push the subsequent element to its left rather than on a new line. In the following example I would expect that the second div begins to the right of the first div, but as you can see in the jsfiddle below, it still spans the whole width. The content on the other hand magically begins where it's supposed to. Does the float rule only float the content but not the margins? Example here .inline { float:left; } .yellow { background-color:yellow; } <div class=

问题 I have a (horizontally) centered outer div containing two elements of unknown width: <div style='width:800px; margin:0 auto'> <div style='float:left'>...</div> <div style='float:right'>...</div> </div> Both floats are top-aligned by default, and are of varying/unknown and different heights. Is there any way to make them vertically centered? I eventually made the outer div display: table and the inner divs display: table-cell; vertical-align: middle; text-align: left/right; but I'm just

问题 Every time I try to do something seemingly-simple in CSS, it doesn't work. I have a content div that contains a 460x160 image. All I want to do is position the image at the bottom-right corner and wrap my text around it. <div id="contents"> <img src="..." /> text text text text text text ... </div> So I want it to look like: ------------------ | text text text | | text text text | | text text -----| | text text | | ------------------ Doing it with a top-left or top-right image is cake:

问题 This is how my code may go:- <div id="parent" style="width:49%"> <div id="left" style="float:left;clear:both;width:auto">BLAH!BLAH!Content goes here</div> <div id="right" style="float:left;clear:both:width:250px">Content again goes here!</div> </div> So basically I want left to auto-size based on the the width of "right" but must stay in limits of the "parent" container! I looked up many places but didn't find sensible answers! Hope this website can help me! :D Thanks in advance 回答1: Float

问题 Please consider following snippet of HTML and CSS p{ background-color: chartreuse; text-align: justify; } img{ float: right; background-color: transparent; margin: 0 0 0 10px; } <!--note this image has transparent background --> <img src="http://i.imgur.com/Qvcvk8i.png" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur autem reiciendis similique sapiente tempore nulla illo atque, eius cum. Nemo, blanditiis quasi. Ea reprehenderit magni officia, eligendi sint, rerum