Xhtml和Divs /浮動

我想將兩個div放在同一行上的每一個旁邊，休息一下，然後有另一個完整的塊div。Xhtml和Divs /浮動

這裏是我迄今爲止
機身碼

<body> 
    <div class="noFloat"> 
     <div class="square bgBlue ltFloat">I'm Blue</div> 
     <div class="square bgGreen ltFloat">I'm Green</div> 
    </div> 
    <div class="dvCenter">I'm in the middle</div> 
    <div class="dvCenter">I'm in the middle</div> 
</body>

CSS

body { 
    background-color: red; 
} 
.square { 
    width: 100px; 
    height: 100px; 
} 
.bgBlue { 
    background-color: blue; 
} 
.bgGreen { 
    background-color: green; 
} 
.dvCenter { 
    float: none; 
    margin: auto; 
    width: 300px; 
    background-color: purple; 
} 
.ltFloat 
{ 
    float: left; 
} 
.noFloat 
{ 
    display: block; 
    float: none; 
}

我很卡，爲什麼這將無法正常工作。任何幫助非常感謝:-)
通過休息我打算有兩個左浮動的div與居中的div不共享水平空間。

來源

2011-05-21 rubixibuc

在http://jsfiddle.net/gaby/53vVP/1

更改.noFloat規則

.noFloat 
{ 
    display: block; 
    float: none; 
    overflow:auto; 
    clear:both; 
}

演示或者您可以在.dvCenter規則集clear:left;。

演示在http://jsfiddle.net/gaby/53vVP/

來源

2011-05-21 09:03:23

Xhtml和Divs /浮動

回答

相關問題