流体布局纯 CSS答案

【问题标题】：Fluid Layout Pure CSS流体布局纯 CSS
【发布时间】：2012-02-12 18:32:11
【问题描述】：

我正在尝试创建流畅的布局。 FF、Chrome、Safari 和 IE8 一切正常

这在 IE7 中不起作用。我确信这是浮动容器的问题。试图做几个明确的修复，但这似乎没有奏效。只是不确定我错过了什么，任何想法或建议都表示赞赏。

如果你比较它在 IE7 和 IE8 中的呈现方式，我注意到了一些事情：

第一行的背景色是容器
缺少容器的底部边框和边距

这是jsFiddle上的一个活生生的例子

这是 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;   
}

【问题讨论】：

这可能是 hasLayout 问题。尝试为浮动元素的容器设置 height:1% 样式。

标签： html css fluid-layout

【解决方案1】：

这绝对是一个 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>

然后只需修复那些讨厌的表单字段，由于某种原因，它们总是会导致布局问题（通过跳到下一行）。

【讨论】：