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

I have 2 columns and those columns need to have the same height. Also, link with class link-arrow need to be 10px at the bottom of the column. You can see my problem at jsfiddle.

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

Is it possible with css?

用css可以吗?

Thanks!

5 个解决方案

#1

Well, i know only 1 html element that can adapt to equal height with others :: a <td> like in display: table-cell;

好吧,我知道只有1个html元素可以适应与其他人相同的高度:: a 就像在display:table-cell;

Go try this answer : Keeping two div the same length

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

Reformat everything like a table with the display property. ;)

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

No javascript required.

不需要javascript。

jsFiddled here http://jsfiddle.net/sPm9M/

jsFiddled here http://jsfiddle.net/sPm9M/

#2

If you can be sure the left column will be bigger, you can use absolute positioning on the text like this jsfiddle. Basically, .block is given a relative position and the right hand column is as follows:

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

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

#3

Solution Using Table-Cells

If you are not sure if the left or right column will determine the overall height of the parent container, you can try using CSS tables as follows.

如果您不确定左列或右列是否将确定父容器的总高度,您可以尝试使用CSS表,如下所示。

The 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>

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

To get some finer control over the spacing, add a third column div.spacer to separate the left and right columns if needed. You can add borders to it too and so on.

要更好地控制间距,请添加第三列div.spacer以根据需要分隔左列和右列。您也可以为它添加边框等等。

The .link-arrow needs some special attention. Absolute positioning does now work within table cells, but you can use it with respect to the containing block (.block). However, you need to determine the left offset manually and also allow some bottom padding on .right-item so prevent any text crowding or overlap.

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

See demo fiddle: http://jsfiddle.net/audetwebdesign/sFY7v/

请参阅演示小提琴:http://jsfiddle.net/audetwebdesign/sFY7v/

#4

You can try this:

你可以试试这个:

Pre-requisites: You will require jquery to be loaded to make this plugin work.

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

Refer to the link below to achieve the results:

请参考以下链接以获得结果?:

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

#5

You just need to specify a height on the .right-item element.

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

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