css-float

问题 Most of the clearfix techniques out there involves adding things at the very bottom of the parent container, and I prefer the pseudo element approach the most since it doesn't add unneeded elements into the HTML. However, recently I found that I am dealing with a container that has some children floating but not all. Say the first 2 children the first floats left and the second floats right. I need a way to clear the float right after the second element, so the content below doesn't get

问题 Considering the following code, where the span elements are floating inside of the div , how can I make the div wrap around the floating child elements, so that the 1px border wraps the children elements? <div style="border:1px solid #000"> <span style="float:left">Content</span> <span style="float:left">Content</span> <span style="float:left">Content</span> </div> 回答1: Most of the time, adding overflow:hidden on the wrapper is sufficient: <div style="border:1px solid #000; overflow:hidden;">

问题 I need some help with positioning divs. The HTML structure is as follows: <div class="container"> <div class="item"> <div class="left"> lorem lorem </div> <div class="right"> <p>right</p> <p class="bottom">bottom</p> </div> </div> </div> And I have the following CSS: .container { float: left; padding: 15px; width: 600px; } .item { float: left; padding: 15px; width: 570px; } .left { float: left; padding: 40px 20px; margin-right: 10px; } .right { position: relative; float: left; } .bottom {

问题 In short: Basically, I just want to know why overfow:hidden explands the container containing a floated item. Shouldnt it hide the overflowing element like in this image http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png why does it do this instead http://css-tricks.com/wp-content/csstricks-uploads/overflow-float.png Long version: Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of flow in

问题 http://jsfiddle.net/zEcn3/12/ I'm trying to get a div content that resizes to the number of div s that fit in a line. So the example works fine when the window is bigger than all the item div s combined so they're all in a row, but when the window is resized smaller so one of the item s is reflowed to the next row, the content div 's width is 100% instead of shrink wrapped. The reason I want this is so I can have centered content with a menu bar above the content that shrinks to the size of

问题 I have a list of lists. Sublists are floated left. See http://jsfiddle.net/P4Psf/ Is there a way to force these columns to be the same height as their neighbors (i.e. have Element 1, 2 and 3 equal height, then 4, 5, 6 equal height (but of course different from 1,2,3) etc. etc.)? At the moment 7 and 8 put themselves below 5 and 6, where they actually should be below 4 and 5. I of course could do this using javascript, but I'm hoping that there is a pure CSS solution that works in (at least)

问题 Is there a way to find number of items ( li tag) inside a ul which has it's float: set to left . Assume i got loads of folders which are visually represented by li tags. Due to floating behavior as soon as the li does not fit in single row they will be pushed down giving it Rows and columns look.my questions is Using jQuery ..etc Is there a way to determine the number of li for each row Code <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li

问题 Is there a way to find number of items ( li tag) inside a ul which has it's float: set to left . Assume i got loads of folders which are visually represented by li tags. Due to floating behavior as soon as the li does not fit in single row they will be pushed down giving it Rows and columns look.my questions is Using jQuery ..etc Is there a way to determine the number of li for each row Code <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li

问题 Examine this code: HTML <h1 class="one">Sometext over here</h1> <input type="text" placeholder="E-mail" class="two"> CSS .one { display: block; float: left; width: 450px; height: 60px; padding-top: 25px; color: #ffffff; font-size:34px; font-weight: 800; } .one:after { clear: both; } .two { margin: 0 auto; font-size: 150%; width: 200px; height: 20px; } JSfiddle Why is the clear both with the after element not working in this example above? while the clearing with <div style="clear:both"></div>

问题 I'm designing my own Anki-Flashcards for learning Japanese: I have three boxes of variable size in a line. The middle one should be centered and has a variable width. The boxes left and right shall be attached to the middle box. The three boxes as a group shall NOT be centered. I do NOT want them all the same size, neither the middle with a fixed size. I can not use JavaScript in the environment I am using. If necessary I can fix the width of the right box (its an icon), but the left and