问题

Question

通常很简单，出于某种原因，我似乎无法在不使用min-height或jQuery的情况下连续获得三个div的列高。

我正在尝试在主div上使用display:table，在孩子的display:table-cell上使用display:inline-block;。我不知道出了什么问题。我也尝试了其他解决方案，例如其他几篇文章中提出了:before { content:"" };和<div class="row">  <div class="columns small-12 medium-4 large-4"> <div class="highlighted-contentblock"> <a href="#" target="_blank"> <div class="contentheader"> <div class="sequence"> 1 </div> <h2> Lorem ipsum </h2> </div> Lorem </a> </div> </div> </div>。

 .large-4 {
    width: 33.33333%;
display:table; }


.highlighted-contentblock
{
    background:gray;
    display:table-cell;
}

Fiddle

{{1}}

Fiddle

Answer 1

问题

看起来原始问题是尝试将table-cell应用于highlight-contentblock而不是列。 columns类是行类的第一个子类，应该在那里应用table-cell。

列

您的列上有显示表（应用于highlight-contentblock类）。我将table-cell替换为应用于columns类的替换。

间距

Float删除了边距，所以我删除了它并在表格上使用了边框间距。

支持

这可以在IE 7中使用但不行。CSS tricks has more info。

点击下面的运行代码段，查看其实际效果。

/* Foundation replacement */
.row {
    padding-bottom:10px;
    max-width:980px;
    margin:0 auto;
    display:table;
    border-spacing:0.9375rem;
 }

.columns {
    box-sizing:border-box;
    display:table-cell;
    background:gray;
 }

.large-4 {
    width: 33.33333%;
 }

<div class="row">
    
<div class="columns small-12 medium-4 large-4">
    
<div class="highlighted-contentblock">
    <a href="#" target="_blank">
        <div class="contentheader">
            <div class="sequence">
                1
            </div>
            <h2>
                Lorem ipsum
            </h2>
        </div>
        Lorem
    </a>
</div>
    
</div>

<div class="columns small-12 medium-4 large-4" data-equalizer-watch="">
    
<div class="highlighted-contentblock">
    <a target="_blank" href=#>
        <div class="contentheader">
            <div class="sequence">
                X
            </div>
            <h2>
                Lorem ipsum <br/> Lorem ipsum
            </h2>
        </div>
        Lorem ipsum</a>
</div>

</div>

<div class="columns small-12 medium-4 large-4" data-equalizer-watch="">
    
<div class="highlighted-contentblock">
    <a target="_blank" href=#>
        <div class="contentheader">
            <div class="sequence">
                3
            </div>
            <h2>
                Lorem ipsum
            </h2>
        </div>
        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</a>
</div>

</div>

</div>

Answer 2

说实话，你的HTML有点乱。你想要遵循这个简单的结构：

<div class="row">
    <div class="col">Content</div>
    <div class="col">Content</div>
    <div class="col">Content</div>
</div>

然后设置一些简单的CSS规则

.row {
    display: table;
}
.col {
    display:table-cell;
    width:33.33%;
}

这里至关重要的是设置表格单元格的宽度。

我已经更新了你的小提琴，以显示这一点 http://jsfiddle.net/eaqr1b17/5/

Answer 3

使用浮动元素，表格/表格单元格渲染有点难以正确渲染......

如果可以，请删除浮动元素，并将其与表格单元格并排显示。

代码的第二个问题是你有一个用table-cell渲染的子元素的背景。因此，所有.column元素的高度都是相同的，但是你不会用背景颜色看到它，因为该属性被设置为具有自己高度的子元素......

这是你的小提琴的更新，没有浮动和边框，以显示高度已正确设置，但你没有看到它，因为你的bg颜色没有应用于正确的元素：< / p>

<强> http://jsfiddle.net/eaqr1b17/6/

/* Foundation replacement */
.row
{
    padding-bottom:10px;  
    display:table;
    border: 1px solid red;
 }
.columns {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    box-sizing: border-box;
    display: table-cell;
    border: 1px solid green;
}
.large-4 {
    width: 33.33333%; 
}
.highlighted-contentblock
{
    background:lightgrey;
}

Answer 4

对于你的标记，你必须这样做：

http://jsfiddle.net/rvos3hx3/

/* Foundation replacement */
 .row {
    padding-bottom:10px;
    max-width:980px;
    margin:0 auto;
    display:table;
}
.columns {
    position: relative;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    box-sizing:border-box;
    background:gray;
    display:table-cell;
}
.large-4 {
    width: 33.33333%;
}

Answer 5

我认为这就是你所需要的：

HTML：

<div class="wrap">
<div class="row">
    <div class="cell">
    Lorem    
    </div>
    <div class="cell">
    Lorem impsum more text
    </div>
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

而对于CSS：

.wrap{
    overflow:hidden;
    width:250px;
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
}
.cell{
    width: 33.33%;
    display: table-cell; 
    background-color: #0f0;
}

如果你想看到它运行，请点击这里 Fiddle

Answer 6

这是一个jsfiddle：http://jsfiddle.net/nrnLbv14/

HTML：

<div class="container">
    <div class="row">
        <div class="column">content 1</div>
        <div class="column">content 2</div>
        <div class="column">content 3</div>
    </div>
</div>

CSS：

.container {
    display:table;
    /* just styling to show it works */
    border-collapse: separate;
    border-spacing: 10px;
    background-color: gray;
}
.row {
    display:table-row;
}
.row .column {
    display:table-cell;
    background-color: #fff;
    width: 33.33%; // If you want all 3 columns equal width
}

不能让DIV的高度相等

6 个答案:

问题

列

间距

支持

点击下面的运行代码段，查看其实际效果。