1

2 つの列があり、それらの列は同じ高さである必要があります。また、クラス link-arrow とのリンクは、列の下部で 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

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 に答える
0

これを試すことができます：

前提条件: このプラグインを機能させるには、jquery をロードする必要があります。

結果を達成するには、以下のリンクを参照してください。

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

于 2013-06-11T13:29:18.977 に答える