4 列 CSS 布局 - 流体

我正在绕圈子试图解决这个问题。

HTML/CSS：

<style type='text/css'>

#content {
    padding: 20px;
    background: #F3F6F7;
}

.inner-box {
    background: #fff;
}

.inner-box .col {
    background:#eee;
    display:block;
    float:left;
    margin:1%;
    padding:20px;
    width:23%;
}

</style>

<div id="content">      
    <div class="inner-box clearfix">
        <div class="col col-1">
            COl1
        </div>
        <div class="col col-2">
            COl2
        </div>
        <div class="col col-3">
            COl3
        </div>
        <div class="col col-4">
          COl4
        </div>

    </div>              
</div>    

我基本上想要一个流畅的 4 列布局，每列周围都有相同的填充，并且整个布局 100% 跨越屏幕。

上面的代码可以工作，但是一旦我缩放浏览器，右侧的第四列就会向下移动到其余的下方。

就我个人而言，我已经放弃使用浮动。我发现他们脾气暴躁，不适合共事。

我现在用display: inline-block;在浮动的地方。请注意，IE7 及更低版本不支持此功能，但有一个特殊的 css hack 可以完美地工作。对于 IE7 及更低版本，使用条件注释和单独的 CSS 文件。

The 跨浏览器内联块黑客非常适合解决这个问题。

对于我的所有项目，我定义了一个内联块类。

.inline-block
{
    display: inline-block;
}

在 IE CSS 文件中，我有：

.inline-block
{
    zoom: 1;
    *display: inline;
}

然后，您可以轻松布局任何流体布局，将 div 并排放置并为每个 div 设置百分比宽度。我通常定义一个表示固定百分比宽度的类

.twenty-five-perc
{
    width: 25%;
}

所以你生成的 html 可能看起来像这样：

<div>
    <div class="inline-block twenty-five-perc">
    </div><div class="inline-block twenty-five-perc">
    </div><div class="inline-block twenty-five-perc">
    </div><div class="inline-block twenty-five-perc">
    </div>
</div>

现在你可能想知道为什么我有这个空缺div标签与前一个结束标签位于同一行。这是因为inline-block尊重空白，这会破坏布局。您可以在此处阅读有关此问题以及缓解方法的更多信息：http://www.lifeathighroad.com/web-development/css-web-development/inline-block-whitespace-workaround/

这里有点漫无目的，但结果是你可以做非常好的流体布局，而不必使用浮动布局。