本文介绍了CSS浮动div在可变高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有无限数量的div的宽度为100px,可以适应250px宽度的父。不管高度如何,我需要在行中显示div,如图所示。我已经尝试解决这个问题,但是div的高度似乎正在改变。
I have infinite number of divs of a 100px width, which can fit into a 250px width parent. Regardless of height, I need the divs to be displayed in rows, as shown in the image. I've tried resolving this, but the div height seems to be screwing it up.
我非常感谢您的帮助。感谢:)
I'd really appreciate your help. Thanks :)
<style>
#holder{
width:250px;
border:1px dotted blue;
display:inline-block;
}
.box{
width:100px;
height:150px;
background-color:#CCC;
float:left;
text-align:center;
font-size:45px;
display:inline-block;
}
.one{
background-color:#0F0;
height:200px;
}
.two{
background-color:#0FF;
}
.three{
background-color:#00F;
}
.four{
background-color:#FF0;
}
</style>
<div id="holder">
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
<div class="box four">4</div>
</div>
这里是
推荐答案
据我所知,没有办法解决这个问题与纯CSS可在所有常见浏览器中使用):
To my knowledge, there's no way to fix this problem with pure CSS (that works in all common browsers):
- 浮动。
-
display:inline-block
。 -
position:relative
withposition:absolute
需要。如果您使用的是服务器端语言,而且您使用的是图片(或可预测的高度),则可以使用服务器端代码自动处理像素调整。
- Floats don't work.
display: inline-block
doesn't work.position: relative
withposition: absolute
requires manual pixel tuning. If you're using a server-side language, and you're working with images (or something with predictable height), you can handle the pixel tuning "automatically" with server-side code.
请改用 jQuery Masonry
Instead, use jQuery Masonry.
这篇关于CSS浮动div在可变高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!