使用浮动来模拟具有不同大小的对象的表布局时出现问题 [英] Trouble using floats to mimic a table layout with different-sized objects
问题描述
我试图使用浮动创建一个无表的布局，但我有麻烦让小对象浮在较大的对象的两边。这是可能吗？
这是我想要做的视觉效果：
UPDATE：我想在文档中的任何时间和位置添加新的蓝色框和粉红色框，而不必对单个项目应用自定义浮动... p>
我已将实际代码保存在JSFiddle中：
如果您希望能够在fly，你应该考虑使用javascript解决方案来解决这个问题。
这是一个好的。
http://masonry.desandro.com/
I'm trying to create a table-less layout using floats, but I'm having trouble getting small objects to float on both sides of larger objects. Is this possible?
Here's a visual of what I'm trying to do:
UPDATE: I'd like to be able to add new blue boxes and pink boxes at any time and anywhere in the document, and not have to apply custom floats to individual items...
I've saved the actual code on JSFiddle: http://jsfiddle.net/TuZfm/
If you prefer to see the raw code, here it is:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
.wrapper {
width:100px;
margin:2em auto;
}
.box {
height:10px;
width:10px;
margin:5px;
float:left;
background-color:blue;
}
.box-medium {
height:30px;
width:30px;
margin:5px;
float:left;
background-color:pink;
}
</style>
</head>
<body>
<div class="wrapper">
<img class="box"/>
<img class="box"/>
<img class="box-medium"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
</div>
</body>
</html>
Thanks for any help!
Here's what I get when I try inline-block:
It's almost perfect except for the deadspace beside the pink box... I'd like to have two rows of blue boxes beside the pink box.
Here's the code I used when trying inline-block: http://jsfiddle.net/QCAFM/
If you want to be able to add new elements on the fly, you should consider using a javascript solution for this problem.
Here's a good one. http://masonry.desandro.com/
这篇关于使用浮动来模拟具有不同大小的对象的表布局时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
