CSS-等高列？

70

在CSS中，我可以执行以下操作：

在此处输入图片说明

但是我不知道如何将其更改为：

在此处输入图片说明

CSS有可能吗？

如果是，如何在不显式指定高度的情况下做到这一点（让内容增加）？

css  html 
— 阿里克斯·阿克塞尔（Alix Axel）
source
不，这很有可能。我用2种不同的方法来完成。首先是效果，但极其复杂。张贴另一个作为链接。
— 乔尔·埃瑟顿
2
实际上，我认为这种方式要简单得多。我有什么忘了吗
— Dan Abramov
简单。简单。等高柱与Flexbox。
— Michael Benjamin

Answers:

72

格

如今，我更喜欢使用网格，因为它允许将所有布局声明保留在父级上，并且默认情况下为您提供等宽的列：

.row {
  display: grid;
  grid-auto-flow: column;
  gap: 5%;
}

.col {
  border: solid;
}
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>
展开摘要

弹性盒

如果希望孩子控制列宽，请使用Flexbox：

.row {
  display: flex;
  justify-content: space-between;
}

.col {
  flex-basis: 30%;
  box-sizing: border-box;
  border: solid;
}
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>
展开摘要

— 帕夫洛
source
2
另外+1，请查看此有用的链接，其中包含flexbox功能的完整列表css-tricks.com/snippets/css/a-guide-to-flexbox
— Tivie 2014年
1
@Towfiq flexbox没有，表布局没有。一切都在答案中。
— 2014年
@ RokoC.Buljan Nope。至少在Safari 9中没有。打开演示并尝试以下操作：如果我将宽度设置为100％，则第三列会比前两列大。
— 帕夫洛
@Pavlo我已经在Safari（5）中看到了这个问题。难以置信。完全不合逻辑，为什么第二个单元格如此狭窄...谁在构建那些浏览器？删除了我之前的评论，以防止产生噪音。感谢您的回复。Up + d。
— Roko C. Buljan
1
@Pavlo的要点是，似乎他们从那以后并没有走多远；）
— Roko C. Buljan
15

是。

这是本文使用的完整CSS。当作者逐步研究完成这项工作所需的内容时，非常值得阅读整篇文章。

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

这不是执行此操作的唯一方法，但这可能是我遇到的最优雅的方法。

还有另一个以这种方式完全完成的网站，查看源代码将使您看到他们的工作方式。

— 乔尔·埃瑟顿
source
很好，找到了！我想你的意思matthewjamestaylor.com/blog/...
— 阿利克斯阿克塞尔
这些都不会使列的高度相同，这只是一个错觉。我真正想知道的是，如果没有JS，如何使它们具有相同的高度。
— 垂直同步
1
@vsync：如果要使其具有相同的高度，请使其具有相同的高度。对于大多数布局，“幻觉”是足够且可以接受的。Html / Css是有限的标记语言，因此在您不得不依赖其他工具之前，它只能做很多事情。
— 乔尔·埃瑟顿
1
您听说过CSS吗？“ flex-box”甚至display：table..only很难保持对较旧IE的支持。但是总有办法
— vsync 2012年
这个答案正在meta上讨论：meta.stackoverflow.com/questions/275584/…–
— gnat
13

给overflow: hidden容器加上大（且相等）的负边距，并给列填充正数。请注意，此方法存在一些问题，例如锚链接在您的布局中将不起作用。

标记

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

的CSS

.container {
    overflow: hidden;
}

.column {
    float: left;    
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

结果

CSS等高列

— 丹·阿布拉莫夫
source
1
我刚刚测试过，看来可以！很酷，我唯一要指出的负面因素是蓝色背景，我想我需要戴眼镜...文字太模糊了。
— Alix Axel 2012年
1
@Alix：如果蓝色背景对于代码示例来说太可怕了，您可以在此处阅读完整的Lorem ipsum ：-)
— Dan Abramov
并不能使它们的高度相等。只有使背景看起来像高度相等，但容器不..
— VSYNC
@vsync：是的，但这通常是期望的结果，并且比其他方法要少得多。
— Dan Abramov
2
我真的很想知道何时真正相等的高度是要解决的正确问题，因为如果内容相等，高度将相等，并且将内容放到底部将相对于容器元素定位。这个答案就是我在这里凸轮时一直在寻找的东西，所以加油。
— 亚当·托利
4

您可以使用CSS表，如下所示：

<style type='text/css">
    .container { display: table; }
    .container .row { display: table-row; }
    .container .row .panel { display: table-cell; }
</style>
<div class="container">
    <div class="row">
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
    </div>
</div>
— K Prime
source
2
但是某些浏览器不支持。
— 乔尔·科洪
似乎很有希望，/我尝试一下。
— Alix Axel
@Joel Coehoorn：你知道哪个吗？知道会很有用。
— Alix Axel
3
@Alix-我肯定知道IE6 / 7不支持display:table-如果您不使用显式表，行和单元格（例如，使用匿名元素，则其他人都会遇到问题（digital-web.com/articles/everything_you_know_about_CSS_Is_wrong） ，等等）
— K Prime 2010年
2
@Alix-有关跨浏览器问题的一些参考：quirksmode.org/css/display.html#table
— K Prime 2010年
4

您可以使用以下JavaScript轻松完成此操作：

$(window).load(function() {
    var els = $('div.left, div.middle, div.right');
    els.height(getTallestHeight(els));
}); 

function getTallestHeight(elements) {
    var tallest = 0, height;

    for(i; i < elements.length; i++) {
        height = $(elements[i]).height();

        if(height > tallest) 
            tallest = height;
    }

    return tallest;
};
— Xandercoded
source
说实在的，直到CSS表成为规范为止：D
— xandercoded 2010年
到目前为止，看起来CSS表似乎并不是常态。
— sheriffderek
2
哈，确实是吗？我们应该为了后代而把它留在这里吗？
— xandercode '16
我们当然应该。
— sheriffderek
1

现代方法：CSS网格。

HTML：

<div class="container">
  <div class="element">{...}</div>
  <div class="element">{...}</div>
  <div class="element">{...}</div>
</div>

CSS：

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.element {
  border: 2px solid #000;
}

现场示例在这里。

repeat(auto-fit, minmax(200px, 1fr));零件设置列的宽度。每列占用可用空间的一小部分，但不能少于200像素。而不是缩小到200px以下，而是在下面进行环绕，因此它甚至可以做出响应。您还可以具有任意数量的列，而不仅仅是3列。它们都非常适合。

如果您只需要3列，请grid-template-columns: repeat(3, 1fr);改用。您仍然可以有更多的元素，它们可以环绕，响应，但始终放置在3列布局中。

有关MDN或CSS技巧的CSS网格的更多信息。

它干净，可读，可维护，灵活并且使用起来也很简单！

— 氨基甲酸酯
source
0

您可以尝试...它适用于我并且兼容所有浏览器...

<div id="main" style="width:800px; display:table">
<div id="left" style="width:300px; border:1px solid #666; display:table-cell;"></div>
<div id="right" style="width:500px; border:1px solid #666; display:table-cell;"></div>
</div>
— 苏门
source
0

另一个选择是使用已解决此问题的框架。Bootstrap当前没有等高选项，而Zurb Foundation则具有，但您可以在此处查看其工作方式：http : //foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

以下是使用方式的示例：

<div class="row" data-equalizer>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
</div>

基本上，他们使用javascript检查最高的元素，并使其他元素的高度相同。

因此，如果只想使用CSS，则会添加更多代码，但是如果您已经在使用框架，则他们已经解决了这一问题。

快乐的编码。

— 马克西姆斯
source
0

使用Flexbox创建等高的列

* {box-sizing: border-box;}

/* Style Row */
.row {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}

/* Make the columns stack on top of each other */
.row > .column {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* When Screen width is 400px or more make the columns stack next to each other*/
@media screen and (min-width: 400px) {
  .row > .column {    
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
<div class="row">
  <!-- First Column -->
  <div class="column" style="background-color: #dc3545;">
    <h2>Column 1</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
  </div>
  <!-- Second Column -->
  <div class="column" style="background-color: #ffc107;">
    <h2>Column 2</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
  </div>
  <!-- Third Column -->
  <div class="column" style="background-color: #007eff;">
    <h2>Column 3</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
  </div>
</div>
展开摘要

— 维沙尔
source
欢迎来到SO！当您用代码回答问题时，请尝试解释一下。在这种情况下，还有更多答案，因此请公开优点。
— DavidGarcíaBodego，
-1

回答：

CSS flexbox很可爱，但是今天淘汰IE9用户有点疯狂。自2015年8月1日起在我们的酒店住宿：

3％IE9
2％IE8

删除这些内容会显示5％的损坏页面？疯。

使用媒体查询引导的方式做追溯到IE8一样display: table/table-cell。所以：

http://jsfiddle.net/b9chris/bu6Lejw6/

的HTML

<div class=box>
    <div class="col col1">Col 1<br/>Col 1</div>
    <div class="col col2">Col 2</div>
</div>

的CSS

body {
    font: 10pt Verdana;
    padding: 0;
    margin: 0;
}

div.col {
    padding: 10px;
}

div.col1 {
    background: #8ff;
}
div.col2 {
    background: #8f8;
}

@media (min-width: 400px) {
    div.box {
        display: table;
        width: 100%;
    }
    div.col {
        display: table-cell;
        width: 50%;
    }
}

在这种情况下，我使用400px作为列和垂直布局之间的切换，因为jsfiddle窗格的趋势非常小。混乱的窗口大小，您会看到各列很好地重新排列，包括当它们需要成为列时可以拉伸到全高，这样它们的背景色就不会在页面的下半部分被切掉。没有疯狂的填充/边距hack会崩溃到页面上的后续标签中，也不会将5％的访问者抛向狼群。

— 克里斯·莫斯基尼
source
-1

这是我刚刚在SASS中编写的示例，其中列间距和列数量（变量）可变：

CSS：

.fauxer * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.fauxer {
  overflow: hidden; }

.fauxer > div {
  display: table;
  border-spacing: 20px;
  margin: -20px auto -20px -20px;
  width: -webkit-calc(100% + 40px);
  width: -moz-calc(100% + 40px);
  width: calc(100% + 40px); }

.fauxer > div > div {
  display: table-row; }

.fauxer > div > div > div {
  display: table-cell;
  width: 20%;
  padding: 20px;
  border: thin solid #000; }
<div class="fauxer">
                <div>
                    <div>
                        <div>
                            Lorem column 1
                        </div>
                        <div>
                            Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr, 
                            sed diam nonumy eirmod tempor invidunt ut labore et 
                            dolore magna aliquyam erat, sed diam voluptua.
                        </div>
                        <div>
                            Lorem column 3
                        </div>
                        <div>
                            Lorem column 4
                        </div>
                        <div>
                            Lorem column 5
                        </div>
                    </div>
                </div>
            </div>
展开摘要

注意：我只是找到时间在一些新的浏览器中对其进行测试。在使用前，请先对其进行测试：)

您可以在SCSS中找到可编辑的示例：JSfiddle

— 兰道夫·梅耶布赫（Randolf Mayerbuch）
source
尽管您的努力似乎很英勇，但这绝不符合跨浏览器的要求。
— 亚历山大·迪克森
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.