0

これが私のhtmlです

<div class="container"> 
    <div class="box">
        <div class="float">
            <img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
        </div>
        <div class="float float_txt">
            text here!
        <p class"a_p">a</p>
        <p class"b_p">b</p>
        <p class"c_p">c</p>
        </div>
    </div>
</div>

とcss

.container{width:400px}
.box{display:inline-block}
.float{width:50%; float:left}
.float img{width: 100%; height:auto;}
.float_txt{background:red}

http://jsfiddle.net/MdtR8/1/

.container動的な幅 (レスポンシブ デザイン) を持ち、画像は自動的にサイズ変更されます。

画像と同じ高さにする必要が.float_txtありますが、abc をパーセンテージで割る必要があるため、REAL の高さが必要です。例：

.a_p, .b_p{height: 20%}
.c_p{height:60%}

どうすればこれにできますか？css のみ js なし :S

4

2 に答える 2

0

で解決しませんかJQuery。.float imgこれは、高さを計算して高さに加算するJQuery の例ですfloat_txt。

$(".float_txt").css({
    'height': $('.float img').height()
});

これは、JQuery を使用した 1 つのソリューションにすぎません。CSS のみを使用するよりもはるかに簡単です。

ジャスフィドル

于 2013-10-28T16:06:19.040 に答える