Question

我正在尝试制作一个3列的布局，但正如您从下面的屏幕截图中看到的那样，最左侧和最右侧的列不会一直向下：

3-column layout with left and right columns not spanning down entirely

您可以在http://codepen.io/vbelenky/pen/hvbEq找到代码，我也会将其粘贴到此处：

<div class="wrapper">

    <div class="primary">
        <div class="primary-left">
            Primary Left<br>
            blah 
        </div>
        <div class="primary-right">
            Primary Right
        </div>
    </div>

    <div class="secondary">
        Secondary
    </div>

</div>

CSS：

.wrapper {
    overflow: hidden;
    width: 600px;
    border: 1px solid black;
}

.secondary {
    width: 200px;
    float: left;
    background: cyan;
}

.primary {
    width: 400px;
    float: right;
}

.primary-left {
    width: 300px;
    float: left;
    background: grey;
}

.primary-right {
    width: 100px;
    float: right;
    background: yellow;
}

Answer 1

HTML：使用与您的查询类似的以下代码：

 <div class="mainDiv">
      <div class="left">Left</div>
        <div class="center">Center</br>Center<br/>Center<br/></div>
      <div class="right">Right</div>
    </div>

CSS：

 .mainDiv{ position: relative; height: auto;}
.left{ position: absolute;background:red; left: 0; top: 0; width: 100px; height: 100% }
.right{ position: absolute;background:blue; right: 0; top: 0; width: 100px;height: 100%; }
.center{ margin: 0 100px;background:green; }

http://jsfiddle.net/pfqpR/

Answer 2

就像monkhan所说，你需要为所有元素设置高度，例如（see on CodePen）：

.wrapper {
    overflow: hidden;
    width: 600px;
    border: 1px solid black;
    height: 40px;
}

.secondary {
    width: 200px;
    float: left;
    background: cyan;
    height: inherit;
}

.primary {
    width: 400px;
    float: right;
    height: inherit;
}

.primary-left {
    width: 300px;
    float: left;
    background: grey;
    height: inherit;
}

.primary-right {
    width: 100px;
    float: right;
    background: yellow;
    height: inherit;
}

这种方法的缺点是你需要提前了解最大高度（在这种情况下，我选择了40px）。

Answer 3

解决这个问题的一种方法是使用绝对位置（而不是浮点数）。它不适合所有需求，但它可能适合您的需要。 http://codepen.io/anon/pen/lLngy

.wrapper {
  overflow: hidden;
  width: 600px;
  border: 1px solid black;
  position: absolute; top: 0; left: 0; bottom: 0;
}

.secondary {
  width: 200px;
  background: cyan;
  position: absolute; top: 0; bottom: 0;
}

.primary-left {
  width: 300px;
  background: grey;
  position: absolute; top: 0; left: 200px; bottom: 0;
}

.primary-right {
  width: 100px;
  background: yellow;
  position: absolute; top: 0; right: 0; bottom: 0;
}

Answer 4

一种不要求您设置任何预定高度的方法是将三色背景图像应用于包装（图像高度可以是50px和＆＃34;重复-y＆＃34; ）。

通过这种方式，您将使内部div的背景颜色一直向下重复到底部，并且无论哪个内部div都是最高的，它都无关紧要。

例如：

.wrapper {
    overflow: hidden;
    width: 600px;
    border: 1px solid black;
    background-image: url('3colours.png');
    background-repeat: repeat-y;
}

Answer 5

其他人说的很好。我只是展示了另一种可能的方式（不方便）。不方便，因为它使宽度变化更加困难。只是一个背景图片黑客。使用（包装宽度x 1）px的背景图像为.wrapper，并在适当的位置使用颜色。同时从.secondary，.primary-right和.primary-left中删除背景颜色样式。

这是小提琴：http://jsfiddle.net/eY9VR/

Answer 6

我的同事提出了解决方案。主要思想是不使用float属性并使用display table和table-cell。请参阅the code以供参考。我不得不将div.secondary移到顶部，我在任何地方注释了float属性，我已经将div.wrapper声明为display：table和div.secondary，div.primary-left，div.primary-right as display：表单元格。

HTML / CSS：布局列不填充空间

6 个答案: