使用 CSS 创建等高的列

Question

我有 2 列，这些列需要具有相同的高度。 此外，带有类链接箭头的链接需要在列的底部为 10px。 你可以在jsfiddle看到我的问题。

HTML：

<div class="block">
    <div class="image-wrap">
        <img src="http://img6.imageshack.us/img6/3977/84462809.png" alt="" />
    </div>
    <div class="right-item">
        <h2>Our Operations</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <a href="javascript:;" class="link-arrow">
            View our operations
        </a>
    </div>
</div>

CSS：

.block {
    width: 315px;
    float: left;
    background: red;
}
.image-wrap {
    float: left;
    width: 112px;
    overflow: hidden;
    border: 1px solid #dfdfdf; 
    background: blue;
}
.right-item {
    margin: 0 0 0 13px;
    width: 186px;
    float: left;
    position: relative;
    background: green;
}
.link-arrow {
    position: absolute;
    left: 0;
    bottom: 10px;
}
img {
    width: 100%;
}
h2 {
    font-size: 18px;
    line-height: 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid #c4c4c4;
    margin-bottom: 13px;
}

css可以吗？

谢谢！

Answer 1

好吧，我只知道 1 个 html 元素可以适应与其他元素相同的高度 :: a <td> 就像在 display: table-cell; 中一样

去试试这个答案：Keeping two div the same length

使用 display 属性重新格式化所有内容，如表格。 ;)

HTML

<div class="table-div" style="width:100%">
    <div class="tr-div">
        <div class="td-div">td-div 1a</div>
        <div class="td-div">td-div 2a</div>
        <div class="td-div">td-div 3a</div>
    </div>
    <div class="tr-div">
        <div class="td-div">td-div 1b</div>
        <div class="td-div">td-div 2b</div>
        <div class="td-div">td-div 3b</div>
    </div>
</div>

CSS

.table-div{display:table}
.tr-div{display:table-row}
.td-div{display:table-cell;border:1px solid silver}

不需要javascript。

jsFiddled 在这里http://jsfiddle.net/sPm9M/

Answer 2

如果你能确定左栏会更大，你可以在文字上使用绝对定位，比如this jsfiddle. 基本上，.block 被赋予了一个相对位置，右边的列如下：

.right-item {
    margin: 0 0 0 13px;
    width: 186px;
    position: absolute;
    background: green;
    top:0; bottom:0; right:0;
}

Answer 3

使用表格单元的解决方案

如果不确定是左列还是右列会决定父容器的整体高度，可以尝试如下使用 CSS 表格。

HTML：

<div class="block">
    <div class="image-wrap">
        <img src="http://img6.imageshack.us/img6/3977/84462809.png" alt="" />
    </div>
    <div class="spacer"></div>
    <div class="right-item">
        <h2>Our Operations</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="javascript:;" class="link-arrow">
        View our operations
        </a>
    </div>
</div>

CSS：

.block {
    width: auto; /* float causes shrink-to-wrap, so just use auto */
    float: left;
    background: red;
    position: relative;
}
.image-wrap {
    display: table-cell;
    vertical-align: top;
    width: 112px;
    background: blue;
}
.image-wrap img {
    vertical-align: top; 
}
.spacer {
    display: table-cell;
    vertical-align: top;
    width: 15px;
    border-right: 1px solid #dfdfdf; 
    border-left: 1px solid #dfdfdf; 
}
.right-item {
    display: table-cell;
    vertical-align: top;
    width: 186px;
    background: green;
    padding-bottom: 2.00em; /* allow some room for .link-arrow */
    padding-left: 10px;
    padding-right: 10px;
}
.link-arrow {
    position: absolute;
    left: 137px; /* 112+15+10 need some math here... */
    bottom: 10px;
}

为了更好地控制间距，如果需要，添加第三列div.spacer 以分隔左列和右列。您也可以为其添加边框等等。

.link-arrow 需要特别注意。绝对定位现在可以在表格单元格中使用，但您可以针对包含块 (.block) 使用它。但是，您需要手动确定 left 偏移量，并允许在 .right-item 上进行一些底部填充，以防止任何文本拥挤或重叠。

见演示小提琴：http://jsfiddle.net/audetwebdesign/sFY7v/

Answer 4

你可以试试这个：

先决条件：您需要加载 jquery 才能使此插件正常工作。

参考以下链接实现效果：

http://www.cssnewbie.com/equalheights-jquery-plugin/#.Ubcl4-vGX79

Answer 5

您只需要在 .right-item 元素上指定一个高度。

.right-item {
    margin: 0 0 0 13px;
    width: 186px;
    float: left;
    position: relative;
    background: green;
    height: 200px;
}