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/

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

Answer 2

一些想法。

首先，您不需要clearfix div。 使用overflow:hidden在#content是一种更好的方法来处理它。 所以你的HTML看起来像这样：

<div id="content">      
    <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是块级元素，所以display:block; 没必要。

此外，除非您为排水沟使用灵活单位，否则当视口小于列百分比允许时，您将遇到问题。 我建议使用百分比作为排水沟。 请记住，百分比是与父元素相关的百分比，因此.col将是#content的百分比。

由于您使用浮动并且每列都有自己的类，因此可以很容易地将装订线添加为右边距，并在最后一个位置将其设置为0。

所以不仅你的标记更简单，而且CSS也是如此：

content {
  padding: 20px;
  background: #F3F6F7;
  overflow:hidden;
  }
.col {
  background:#eee;
  float:left;
  width:22%;
  margin-right: 4%;
  }
.col-4 {margin-right:0;}

另请注意（22％* 4）+（4％* 3）= 100％。

希望这可以帮助。 有关工作示例，请参见http://jsfiddle.net/D759g/ 。

Answer 3

我会在这个布局中使用绝对定位。 在我看来，最可靠的解决方案。 另外，您可以在不破坏布局的情况下更改填充。 另外你可以添加边框和边距，没问题。

/* assuming your html is under the body tag */
html, body, #content, .inner-box { margin: 0px; height: 100%; }

.inner-box { position: relative; }

.col {
  position: absolute;
  top: 0px; bottom: 0px;
  padding: 1%;
  border: 1px solid black;
}

.col-1 { left: 0%; right: 75%; }

.col-2 { left: 25%; right: 50%; }

.col-3 { left: 50%; right: 25%; }

.col-4 { left: 75%; right: 0%; }

请注意，列的left值和上一列的right值总是加起来为100％

注意：这在ie6中不起作用。

Answer 4

我尝试使用低于23％的东西：DOM元素边框，填充，边距等添加到元素的宽度，而不是成为宽度的一部分。 我假设您正在缩小浏览器，缩放百分比，但不是固定像素填充等等，这意味着相对于内部宽度有更多的填充，使得列对于100％宽度来说有点太大。

希望这可以帮助，

詹姆士

Answer 5

将某些值作为固定像素会导致麻烦。

确保你的所有填充和边距和内容总共相当于99％ - 我发现当所有值都等于100％时，Mozilla会遇到麻烦。

  <style type='text/css'>

    #content {
        padding: 1%;
        background: #F3F6F7;
    }

    .inner-box {
        background: #fff;
    }

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

    </style>

Answer 6

这是执行2,3或4列列表的最简单方法。 只需将百分比调整为等于页面的99％（在这种情况下为100）。

<font size="4"><font color="maroon"><b>TITLE</b></font>  <font size="2"><div style="width: 25%; float: left;">
 <ul>
 <li>Left Item 1</li>
 <li>Left Item 2</li>
 <li>Left Item 3</li>
 <li>Left Item 4</li>
 <li>Left Item 5</li>
 </ul>
 </div>
 <div style="width: 25%; float: left;">
 <ul>
 <li>Left Item 1</li>
 <li>Left Item 2</li>
 <li>Left Item 3</li>
 <li>Left Item 4</li>
 <li>Left Item 5</li>
 </ul>
 </div>
 <div style="width: 25%; float: right;">
 <ul>
 <li>Right Item 1</li>
 <li>Right Item 2</li>
 <li>Right Item 3</li>
 <li>Right Item 4</li>
 <li>Right Item 5</li>
 </ul>
 </div> <div style="width: 25%; float: right;">
 <ul>
 <li>Right Item 1</li>
 <li>Right Item 2</li>
 <li>Right Item 3</li>
 <li>Right Item 4</li>
 <li>Right Item 5</li>
 </ul>
 </div></font></font>