Question

我有3个col布局，左边和中间col是图像，最后一个col是文本。即使浏览器调整大小，我也希望始终保持所有col的高度相同。我不介意在最后一个col上有滚动条和文本。

HTML：

  <div class="mid-col">
    <img src=""/>
  </div>

  <div class="right-col">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Sed  semper, eros nec sollicitudin porta, nibh justo consectetur elit, 
         a ultricies libero est ac justo. Nulla dictum dignissim placerat. 
         Donec non eros nisl. Morbi diam est, volutpat a orci tempus, mollis 
         maximus dui. Quisque consequat risus et sagittis dapibus. Mauris nulla 
         quam, ullamcorper a mattis sed, pretium sit amet dolor. Etiam pharetra 
         velit id lacus cursus imperdiet. Phasellus ex ipsum, finibus vitae 
         rhoncus et, suscipit at risus. Nam dignissim sapien tortor, ut 
         egestas tortor pulvinar ut. 
    </p>
  </div>
</div>

CSS：

#content-container {
    width: 100%;
    height: 33.333%;
}

.left-col img {
    width: 33.333%;
    float: left;
    display:block;
    box-sizing: border-box;
   -moz-box-sizing: border-box;
}

.mid-col img {
    width: 33.333%;
    float: left;
    display:block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.right-col {
    width: 33.333%;
    height: 33.333%;
    height: 100%;
    display:block;
    overflow: scroll;
}

Answer 1

浏览器从上到下呈现，因此您将获得相反的效果。尝试：

<div class="container">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>

.container {
    height: 100%;
}
.child1 {
    width: 33.333%;
    height: 33.333%;
    float: left;
    box-sizing: border-box;
}
.child2 {
    width: 33.333%;
    height: 33.333%;
    float: left;
    box-sizing: border-box;
}
.child3 {
    width: 33.333%;
    height: 33.333%;
    float: left;
    box-sizing: border-box;
    overflow-y: auto;
}

父容器可以占用所有空间。每个孩子都可以漂浮到左边。更改框大小可保持百分比的一致宽度。

Answer 2

您可以使用 display:table-[cell]

来实现这一目标

＆＃13;

#content-container {
  width: 100%;
  display: table;
}
#content-container > div {
  display: table-cell;
  width: 33%;
  vertical-align: top;
  border: 1px solid green
}
img {
  width: 100%;
  display: block;
  height: auto;
}

＆＃13;

<div id="content-container">
  <div class="left-col">
    <img src="http://lorempixel.com/100/100" />
  </div>
  <div class="mid-col">
    <img src="http://lorempixel.com/100/100" />
  </div>
  <div class="right-col">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper, eros nec sollicitudin porta, nibh justo consectetur elit, a ultricies libero est ac justo. Nulla dictum dignissim placerat. Donec non eros nisl. Morbi diam est, volutpat a orci tempus,
      mollis maximus dui. Quisque consequat risus et sagittis dapibus. Mauris nulla quam, ullamcorper a mattis sed, pretium sit amet dolor. Etiam pharetra velit id lacus cursus imperdiet. Phasellus ex ipsum, finibus vitae rhoncus et, suscipit at risus.
      Nam dignissim sapien tortor, ut egestas tortor pulvinar ut.
    </p>
  </div>

</div>

＆＃13;

Answer 3

我喜欢@ beautifulcoder的答案，但我在我的一个网站上有相同的东西，并用jquery处理它。

$(function() {
    var divHeight = $(window).height()/3;
    $('.left-col').css('height',divHeight));
    $('.mid-col').css('height',divHeight);
    $('.right-col').css('height',divHeight);
    $('.right-col').css('overflow-y','auto');
})

3列布局渲染问题

3 个答案: