Html 流体布局纯CSS

我正在尝试创建一个流畅的布局。 所有东西都在使用FF、Chrome、Safari和IE8

这在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>  

---

正如skybondsor所说，这绝对是一个布局问题

我见过的清理浮动的最佳方法如下：

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

.floatParent{
缩放：1；这可能是hasLayout问题。请尝试为浮动元素的容器指定高度：1%样式。
.floatParent {
    zoom: 1; <-- this is for IE7
}
.floatParent:after { <-- this is for all the good browsers
    content: "\0020"; 
    clear: both;
    display: block;
}

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