html - 2 div float 但高度相同

Question

这是我的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 设置为与图像高度相同，但我需要一个真实高度，因为我必须将 a b c 除以百分比。示例:

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

我怎么能这样呢？只有 css 没有 js :S

Answer 1

为什么不用JQuery 解决呢。下面是JQuery计算.float img高度并添加到float_txt高度的例子。

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

这只是使用 JQuery 的一种解决方案。这绝对比仅使用 css 更容易。

Jsfiddle