可变高度的 CSS 浮动 Div [英] CSS Floating Divs At Variable Heights
问题描述
我有无限数量的 100 像素宽度的 div,它们可以放入 250 像素宽度的父级.无论高度如何,我都需要按行显示 div,如图所示.我试过解决这个问题,但 div 高度似乎把它搞砸了.
非常感谢您的帮助.谢谢:)
<样式>#持有者{宽度:250px;边框:1px 蓝色虚线;显示:内联块;}.盒子{宽度:100px;高度:150px;背景颜色:#CCC;向左飘浮;文字对齐:居中;字体大小:45px;显示:内联块;}.一{背景色:#0F0;高度:200px;}.二{背景色:#0FF;}.三{背景色:#00F;}.四{背景色:#FF0;}</风格><div id="持有人"><div class="box one">1</div><div class="box 2">2</div><div class="box 3">3</div><div class="box 4">4</div>
这是jsfiddle
这是我使用 javascript 所做的和实现的https://jsfiddle.net/8o0nwft9/
据我所知,使用纯 CSS(适用于所有常见浏览器)无法解决此问题:
- 浮动不起作用.
display: inline-block
不起作用.position: relative
与position: absolute
需要手动像素调整.如果您使用的是服务器端语言,并且正在处理图像(或具有可预测高度的内容),则可以使用服务器端代码自动"处理像素调整.
改为使用 jQuery Masonry.
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>
Here is the jsfiddle
Here is what I did and achieved using javascript https://jsfiddle.net/8o0nwft9/
To my knowledge, there's no way to fix this problem with pure CSS (that works in all common browsers):
- 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.
Instead, use jQuery Masonry.
这篇关于可变高度的 CSS 浮动 Div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!