css-float | 易学教程

IE7 float and clear on the same element

阅读更多关于 IE7 float and clear on the same element

问题 Here is my code, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[your title]</title> <style type="text/css"> .a, .b, .c { float: left; } .b { clear: left; } </style> </head> <body> <div class="a">1</div> <div class="b">2</div> <div class="c">3</div> </body> </html> In IE8, firefox, chrome,

Vertical and horizontal align of divs

阅读更多关于 Vertical and horizontal align of divs

问题 Please expand the jsfiddle to see box in action, http://jsfiddle.net/5fp37/. I want the blue border boxes to align side by side, but I dont want to mention a width to the boxes. This fiddle works ok but as soon as I remove the width:400px , both boxes get on top/bottom of each other. Any clue? dont want to specifiy width of any thing. board or box. just a minimum width of box, because ther could be unkown number of boxes. and each would alight side by side Nor want the divs to change position

CSS Image Gallery Float BUG

阅读更多关于 CSS Image Gallery Float BUG

问题 This is new one, I'm having problem with an Archive page i've made. It seems like a fairly straight forward floated div image gallery... but for some reason the there's a bunch of line breaks randomly throughout the divs. I thought it may have been a problem with Cufon or IE.JS etc but I disabled all JS and it still bugs out. Seems a bit long to post the code here, and I've thrown a bunch of unnecessary divs and clear fixes in but nothing seems to be working. I'll post and organize a proper

Google Chrome, float, and media queries

阅读更多关于 Google Chrome, float, and media queries

问题 I'm having a problem where Google Chrome sometimes incorrectly renders a floated element. More specifically, the markup looks like this: <h1> Headline <small>Sub-heading</small> </h1> This is styled using this simple CSS: h1 small { display: block; } @media (min-width: 750px) { h1 small { float: right; } } (here is a link to a jsfiddle.com which demonstrates the problem in action: http://jsfiddle.net/ys6L88r8/1/) As you can see, the element is floated within a media query. When loading the

Why isn't overflow:auto required for text content?

阅读更多关于 Why isn't overflow:auto required for text content?

问题 In the following HTML snippet, how can I make the final paragraph appear under the 2 lists rather than to the right? <div> <ul style="float: left;"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <ul style="float: left;"> <li>item 4</li> <li>item 5</li> <li>item 6</li> </ul> </div> <div> <p>  A final paragraph of text </p> </div> This HTML also available here: http://jsfiddle.net/8f2cE/ Also, I'd appreciate any background explanation as

HTML CSS floats and inline-block issues

阅读更多关于 HTML CSS floats and inline-block issues

问题 There are three blocks, first and last one are floated left and the middle one is displayed inline-block and cleared both. Why my middle block is coming at the end? Here is my code. .box { width: 200px; height: 200px; background: red; } .block { height: 200px; width: 200px; background: blue; display: inline-block; clear: both; } .box1 { float: left; } .box2 { float: left; background: green; } <div class="box box1">1st Block</div> <div class="block">Middle Block</div> <div class="box box2"

Floating div's in list items (ul, li)

阅读更多关于 Floating div's in list items (ul, li)

问题 I have a list with two <div> s in every <li> and I want to float them one next to the other and I want the <li> to take the whole availabe space. How do I do it? <html> <head> <title></title> <style type="text/css"> body { } ul { } li { } .a { } .b { } </style> </head> <body> <ul> <li> <div class="a"> content </div> <div class="b"> content </div> </li> </ul> </body> </html> 回答1: *{ margin: 0; padding: 0;} li{ width: 100%: display: block; } li:after{ clear: both; } div.a{ width: 49%; float:

Floating Link in Page

阅读更多关于 Floating Link in Page

问题 I want to make floating link which will be displayed in webpage whether user scrolls up/down the page. <div id="valids" style="position: fixed; bottom: 5px; left: 5px;"> <a href="http://validator.w3.org/check?uri=referer" class="valid"> <img alt="Valid XHTML 1.0" src="http://www.w3.org/Icons/valid-xhtml10-blue" style="border: 0pt none ; width: 88px; height: 31px;"/></a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.reapercharlie.com" class="valid"> <img alt="Valid CSS 2

Containing Div Not Behaving Correctly When Child Divs are Floating

阅读更多关于 Containing Div Not Behaving Correctly When Child Divs are Floating

问题 This question is related to another question I asked Basically, I have 2 horizontally aligned divs. Both sit inside a div called ".Parent", so the structure is like this: <div class="Parent"> <div style="float:right"> <span>source list</span> <select size="10"> <option /> <option /> <option /> </select> </div> <div style="float:left"> <span>dest list</span> <select size="10"> <option /> <option /> <option /> </select> </div> <div style="clear:both; font-size:1px;"></div> </div> The problem is

Containing Div Not Behaving Correctly When Child Divs are Floating

阅读更多关于 Containing Div Not Behaving Correctly When Child Divs are Floating