Question

我正在尝试使用浮点数创建无表格布局，但是我无法让小对象浮动在较大对象的两侧。这可能吗？

以下是我正在尝试做的事情的视觉效果：

How can I get the blue boxes on box sides of the pink box?

更新：我希望能够随时随地在文档中添加新的蓝框和粉红色框，而不必将自定义浮动应用于单个项目...... < / p>

我已经在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/

Answer 1

如果您希望能够动态添加新元素，则应考虑使用javascript解决方案解决此问题。

这是一个很好的。 http://masonry.desandro.com/

Answer 2

浮动：右边的小方框，浮动：左边的大方块。在这里工作

Answer 3

您是否考虑过使用display：inline-block;而不是花车？似乎对我来说很好。

Answer 4

你可以在粉红色的盒子上使用绝对定位的组合（从流动中取出盒子，因此它不会影响漂浮的蓝色盒子）和jQuery（添加必要的空间）。但是，如果粉红色的盒子是第3个孩子，这个解决方案只会起作用。

http://jsfiddle.net/yjmdz/

编辑：这似乎只适用于Chrome，我还在弄清楚发生了什么......

无法使用浮动来模拟具有不同大小对象的表格布局

4 个答案: