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

如果你可以确定左栏会更大，你可以在this jsfiddle.这样的文字上使用绝对定位基本上，.block给出相对位置，右侧列如下：

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

Answer 2

嗯，我知道只有1个html元素可以适应与其他人相同的高度:: <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 here http://jsfiddle.net/sPm9M/

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;
}

使用CSS创建具有相同高度的列

5 个答案:

使用表格单元格的解决方案