4列CSS布局 - 流体

Question

我正试图解决这个问题.

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%.

上面的代码可以工作,但是一旦我缩放浏览器,右边的第4列将在其余部分下移.

Answer 1

就个人而言,我已经放弃了使用花车.我觉得他们太气质了.

我现在用display: inline-block;浮标代替.请注意,IE7及以下版本不支持此功能,但有一个特殊的css hack可以完美运行.IE7及以下版本使用条件注释和单独的CSS文件.

在跨浏览器的inline-block的黑客是梦幻般的解决这个获得.

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

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

在IE CSS文件中,我有:

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

然后,您可以轻松布局任何流体布局,并排放置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/

这里有一点点漫无边际,但结果是你可以做到非常漂亮的流畅布局,而不必用漂浮布局.