可变高度的CSS浮动Div
可变高度的CSS浮动Div
提问于 2011-03-08 23:45:44
我有无限多个宽度为100px的div，可以放入一个宽度为250px的父类中。不管高度如何，我需要以行的形式显示div，如下图所示。我试过解决这个问题，但是div的高度似乎把它搞砸了。
我真的很感谢你的帮助。谢谢:)
<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>这是jsfiddle
以下是我使用javascript https://jsfiddle.net/8o0nwft9/所做的工作和实现的内容
回答 8
Stack Overflow用户
发布于 2011-03-09 00:02:08
假设您的需求更像您的有色示例代码，那么：
.box:nth-child(odd){
clear:both;
}如果它将是3行，那么nth-child(3n+1)
Stack Overflow用户
发布于 2011-05-04 19:28:35
正如已经正确指出的那样，仅使用CSS是不可能的……谢天谢地，我现在已经在http://isotope.metafizzy.co/中找到了一个解决方案
它似乎完全解决了这个问题。
Stack Overflow用户
发布于 2011-03-09 00:15:18
在这个评论(CSS Block float left)的帮助下，我找到了答案。
在我创建的每个“行”中，我都添加了一个类名left。
在我创建的其他“行”中，我添加了一个类名right。
然后我向左浮动和向右浮动这些类名的每一个！
唯一的复杂之处在于，我的内容顺序在“右”行颠倒了，但这可以使用PHP解决。
感谢大家的帮助！
#holder{
width:200px;
border:1px dotted blue;
display:inline-block;
}
.box{
width:100px;
height:150px;
background-color:#CCC;
float:left;
text-align:center;
font-size:45px;
}
.one{
background-color:#0F0;
height:200px;
}
.two{
background-color:#0FF;
}
.three{
background-color:#00F;
float:right;
}
.four{
background-color:#FF0;
float:right;
}
.left{float:left;}
.right{float:right;}<div id="holder">
<div class="box one left">1</div>
<div class="box two left">2</div>
<div class="box four right">4</div>
<div class="box three right">3</div>
</div>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5234749
复制相关文章
相似问题