流體佈局純CSS

我想創建一個流體佈局。一切工作FF，鉻，Safari和IE8流體佈局純CSS

這只是不工作在IE7。我相信這是浮動容器的問題。試圖做一些明確的修復，但似乎沒有工作。只是不確定我缺少什麼，任何想法或建議，都表示讚賞。

如果你比較一下如何呈現在IE7到IE8的幾件事情，我注意到：

的背景色爲第一行是容器
下邊框和邊距的背景顏色容器的缺失

一個活生生的例子這裏是HTML

<div class="container layout"> 
    <div class="containerContent row"> 

     <div class="group"> 
      <div class="column"> 
       <div class="component"> 
       Player 1: 
       </div> 
      </div> 
      <div class="column"> 
       <div class="component"> 
        <input class="text" type="text"/> 
       </div> 
      </div> 

     </div> 
     <div class="groupByTwo group"> 
      <div class="column"> 
       <div class="component"> 
       Player 2: 
       </div> 
      </div> 
      <div class="column"> 
       <div class="component"> 
        <input class="text" type="text"/> 
       </div> 
      </div> 

     </div> 
     <div class="clearFix"></div> 
    </div> 
</div>

這裏是CSS

.container{ 
    margin: 5px; 
    border: 1px solid #fff; 
    background-color: #aaa; 
} 

.containerContent{ 
    margin: 1px; 
    background-color: #f5f5f5; 
} 

.group{ 
    float: left; 
    width: 50%; 
    overflow: hidden; 
} 

.column{ 
    float: left; 
    width: 50%; 
    overflow: hidden; 
} 

.component{ 
    padding: 5px; 
} 

.clearFix{ 
    clear: both; 
}

來源

2012-01-23 Gabe

這可能是一個hasLayout問題。嘗試給你的浮動元素的容器一個高度：1％的風格。 – skybondsor

這絕對是一個hasLayout的問題，像skybondsor說。

我已經看到了清除浮動的最好方法是這樣：

.floatParent { 
    zoom: 1; <-- this is for IE7 
} 
.floatParent:after { <-- this is for all the good browsers 
    content: "\0020"; 
    clear: both; 
    display: block; 
}

然後你可以從標記刪除防語義clearfix DIV，只是有這樣的東西乾淨：

<div class="floatParent"> 
    <div class="floating">I FLOAT!</div> 
    <div class="floating">WHOA ME TOO!</div> 
</div>

然後，這只是一個修理那些討厭的表單域，由於某種原因總是會導致佈局問題（通過下降到下一行）的問題。

來源

2012-02-12 10:32:11 JuanOjeda

流體佈局純CSS

回答

相關問題