CSS:浮动时忽略div高度 [英] CSS: Ignoring divs height when floating
问题描述
我要显示一些图片。所有它们具有相同的宽度但不同的高度。
我想要做的事情:
每张图片的课程名称都是
< img class = src = .... />
在样式表中我指定了float:left属性:
.pic {
float:left
}
最后的结果不是预期的结果,而是每行在与上一行的最高div之间垂直对齐:
有没有办法在纯交叉浏览器css中解决我的问题?
演示: http://jsfiddle.net/ ThinkingStiff / NcxPr /
HTML:
< div id =container>
< img class =imagesrc =http://farm1.staticflickr.com/205/494701000_744cc3a83a_z.jpg/>
< img class =imagesrc =http://farm5.staticflickr.com/4028/4287569889_f6a4fca31b_z.jpg/>
< img class =imagesrc =http://farm3.staticflickr.com/2340/2421926504_d8509d0a98_z.jpg/>
< img class =imagesrc =http://farm1.staticflickr.com/197/503792921_fedf8ba47e_z.jpg/>
< img class =imagesrc =http://farm2.staticflickr.com/1153/741035029_f394e11a1f_z.jpg/>
< img class =imagesrc =http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_z.jpg/>
< img class =imagesrc =http://farm2.staticflickr.com/1339/1157653249_dbcc93c158_z.jpg?zz=1/>
< img class =imagesrc =http://farm3.staticflickr.com/2570/4220856234_029e5b8348_z.jpg?zz=1/>
< / div>
CSS:
#container {
column-count:3;
column-fill:balance;
column-gap:10px;
width:330px;
}
.image {
display:block;
margin-bottom:10px;
width:100px;
}
输出:
I'm trying to display some pictures. All of them have the same width but different height. I'm trying to do something like:
Every picture's class name is pic
<img class = "pic" src = .... />
In the stylesheet I specified the float:left attribute:
.pic{
float:left
}
The end result isn't the one expected while every row is vertically aligned after the highest div from the row before:
Is there a way to solve my problem in pure cross browser css?
You can do this with no extra markup with CSS3 column-count
, assuming you at least have a single containing element.
Demo: http://jsfiddle.net/ThinkingStiff/NcxPr/
HTML:
<div id="container">
<img class="image" src="http://farm1.staticflickr.com/205/494701000_744cc3a83a_z.jpg" />
<img class="image" src="http://farm5.staticflickr.com/4028/4287569889_f6a4fca31b_z.jpg" />
<img class="image" src="http://farm3.staticflickr.com/2340/2421926504_d8509d0a98_z.jpg" />
<img class="image" src="http://farm1.staticflickr.com/197/503792921_fedf8ba47e_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1153/741035029_f394e11a1f_z.jpg" />
<img class="image" src="http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1339/1157653249_dbcc93c158_z.jpg?zz=1" />
<img class="image" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_z.jpg?zz=1" />
</div>
CSS:
#container {
column-count: 3;
column-fill: balance;
column-gap: 10px;
width: 330px;
}
.image {
display: block;
margin-bottom: 10px;
width: 100px;
}
Output:
这篇关于CSS:浮动时忽略div高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!