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 及更低版本使用条件 cmets 和单独的 CSS 文件。

Cross-browser Inline-Block hack 非常适合解决这个问题。

对于我所有的项目，我定义了一个 inline-block 类。

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

这里有点漫不经心，但结果是你可以做出非常好的流畅布局，而不必费力地使用浮动布局。

Answer 2

一些想法。

首先，您不需要 clearfix div。在#content 上使用overflow:hidden 是处理此问题的更好方法。所以你的 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>

这样更干净。其次，divs 是块级元素，所以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>