这是我的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}
.container
具有动态宽度(响应式设计),图像会自动调整大小。
我需要将 .float_txt
设置为与图像高度相同,但我需要一个真实高度,因为我必须将 a b c 除以百分比。示例:
.a_p, .b_p{height: 20%}
.c_p{height:60%}
我怎么能这样呢?只有 css 没有 js :S
最佳答案
为什么不用JQuery
解决呢。下面是JQuery计算.float img
高度并添加到float_txt
高度的例子。
$(".float_txt").css({
'height': $('.float img').height()
});
这只是使用 JQuery 的一种解决方案。这绝对比仅使用 css 更容易。
关于html - 2 div float 但高度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19638722/