使用浮动来模拟具有不同大小对象的表格布局时遇到问题
我正在尝试使用浮动创建无表布局，但我无法让小对象漂浮在较大对象的两侧。这可能吗？
这是我正在尝试做的事情的视觉效果：
更新： 我希望能够在文档中随时随地添加新的蓝色框和粉色框，而不必将自定义浮动应用于单个项目...
我已经将实际代码保存在 JSFiddle 上： http://jsfiddle.net/TuZfm/
如果您更喜欢查看原始代码，这里是：
<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>
感谢任何帮助！
这是我尝试 inline-block 时得到的结果：
除了粉色框旁边的死角之外，它几乎是完美的。 ..我想要在粉色盒子旁边有两排蓝色盒子。
这是我在尝试 inline-block 时使用的代码： http://jsfiddle.net/QCAFM/
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/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
如果您希望能够动态添加新元素，您应该考虑使用 javascript 解决方案来解决此问题。
这是一个很好的。
http://masonry.desandro.com/
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/
浮动：小盒子的右侧，浮动：大盒子的左侧。在这里工作过
float: right on the small boxes, and float: left on the large one. Worked here
您是否考虑过使用 display: inline-block;而不是浮动？似乎对我来说效果很好。
Have you considered using display: inline-block; instead of floats? Seems to work fine for me.
您可以在粉色框上使用绝对定位（将框从流程中取出，因此不会影响浮动的蓝色框）和 jQuery（添加必要的空间）的组合。
然而，只有当粉红色的盒子是第三个孩子时，这个解决方案才有效。
http://jsfiddle.net/yjmdz/
编辑：这似乎只适用于 Chrome，我仍在弄清楚发生了什么事..
You could use a combination of absolute positioning on the pink box (taking the box out of the flow, so it won't affect the floating blue boxes), and jQuery (to add the necessary space).
This solution will only work however, if the pink box is the 3rd child.
http://jsfiddle.net/yjmdz/
EDIT: this seems to be working only on Chrome, I'm still figuring out what's happening..