0

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

3 列布局，左列和右列未完全向下跨越

您可以在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;
}
4

6 回答 6

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/

于 2013-07-26T09:39:19.493 回答
0

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

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

于 2013-07-26T09:59:48.563 回答
0

就像monkhan说的那样，您需要为所有元素设置高度，例如（参见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）。

于 2013-07-26T09:37:57.453 回答
0

解决此问题的一种方法是使用绝对位置（而不是浮动）。它并不适合所有需求，但它可能适合您的需求。 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;
}
于 2013-07-26T09:39:01.860 回答
0

一种不需要您设置任何预定高度的方法是将 3 色背景图像应用到包装器（图像高度可以是 50px 和“repeat-y”）。

这样，您将让内部 div 的背景颜色一直重复到底部，并且哪个内部 div 最高并不重要。

例如：

.wrapper {
    overflow: hidden;
    width: 600px;
    border: 1px solid black;
    background-image: url('3colours.png');
    background-repeat: repeat-y;
}
于 2013-07-26T09:45:17.153 回答
0

我的同事给出了解决方案。主要思想是不使用浮点属性，而是使用显示表格和表格单元格。请参阅代码以供参考。我不得不将 div.secondary 移到顶部，我在各处注释掉了 float 属性，我已将 div.wrapper 声明为 display: table 和 div.secondary、div.primary-left 和 div.primary-right 作为显示：表格单元格。

于 2013-08-16T10:50:39.063 回答