1

我有 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吗？

谢谢！

4

5 回答 5

1

如果你可以确定左列会更大，你可以像这个jsfiddle一样在文本上使用绝对定位。 基本上，.block给定一个相对位置，右侧列如下：

.right-item {
    margin: 0 0 0 13px;
    width: 186px;
    position: absolute;
    background: green;
    top:0; bottom:0; right:0;
}
于 2013-06-11T13:31:09.260 回答
1

使用表格单元的解决方案

如果您不确定左列或右列是否会决定父容器的整体高度，您可以尝试使用 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/

于 2013-06-11T15:22:39.150 回答
1

好吧，我知道只有 1 个 html 元素可以适应与其他元素相同的高度 :: a <td>like indisplay: table-cell;

去试试这个答案：保持两个 div 的长度相同

使用 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/

于 2013-06-11T14:17:41.307 回答
0

你可以试试这个：

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

参考下面的链接来实现结果：

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

于 2013-06-11T13:29:18.977 回答
0

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

.right-item {
    margin: 0 0 0 13px;
    width: 186px;
    float: left;
    position: relative;
    background: green;
    height: 200px;
}
于 2013-11-19T11:03:52.733 回答