Question

2个div具有相同的高度。

我尝试了所有黑客（也使用jquery）

padding-bottom: 1000px;
margin-bottom: -1000px;

hack效果最好。右列需要一个底部边框，但它没有显示，因为margin-bottom：-1000px。

有什么解决方案吗？我做了一个jsfiddle：

http://jsfiddle.net/s92rzcsz/

Answer 1

如果您不需要担心IE＆lt; 8然后你可以使用display：table-cell并给出两个单元格内容并将一个普通边框应用到div1的div-bottom

div1, div2 {
  display:table-cell;
}

Answer 2

<div class="container">
<div class="row">
    <div class="column">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div class="column blackborder">Something</div>
</div>

.container {
    display: table;
}
.row {
    display: table-row;
}
.column {
    display: table-cell;
    margin: 20px;
    background-color: #f0f0f0;
}
.blackborder{
border-bottom:2px solid #000;
}

http://jsfiddle.net/s92rzcsz/5/

你可以用表格来实现这个目标

Answer 3

如果总是相同的风格，我有一个可能的答案。在第一列div中创建一个span，放置边框，

困难的部分在第二列，你必须写一些<br>作为你需要的行。

<div class="column">
something
    <div class="test"></div>    
</div>

.test{
border-bottom:2px solid #000;    
}

这里的例子 https://jsfiddle.net/s92rzcsz/6/

2与border-bottom相同的高度

3 个答案: