我们能否通过CSS强制使一个div元素换行？

Question

(最终解决方案如下)

---

我很确定按照我想象的方式是不可能实现的，但Stackoverflow上有许多聪明、机智和温柔的人，我会试一试。

我有一个container-div元素，其中填充了一个或多个"child-div"元素。这些容器在某种程度上是“虚拟”的，实际上它们只应该显示哪些子级属于一起。由于我不知道每个父元素中放置了多少个子级，因此无法使用固定宽度来处理。这些元素应该能够漂浮以便优雅地处理窗口调整大小。

我的目标是，在同一行中显示相同数量的“child-divs”，而不管它们位于哪个父div中。我当前的问题是，float导致整个父容器折行。所以问题是，有没有可能像这样“锯”一个div：

之前

之后

有意义吗？这是我的当前游乐场:

http://jsfiddle.net/5FXBu/

---

经过与Gaby aka G. Petrioli的许多实验（谢谢你，朋友），我最终创建了这个解决方案：http://jsfiddle.net/5FXBu/11/

- jAndy

---

你有使用过"display: inline-block"吗？ - Pointy

@Pointy：有一点尝试，但是没有太大的成功。欢迎任何推荐。 - jAndy

是的，我明白你的意思 - 就像你想让外部的<div>包装器表现得有点像内联<span>元素一样。我不认为我知道如何做到这一点。 - Pointy

@jAndy，抱歉..我没有看到你的 playground 代码..正在查看它.. - Gabriele Petrioli

Answer 1

如果container-div只是用于分组且对图形设计影响较小，则可以将它们设置为inline。将child-div设置为inline-block允许将container-div的某些布局要求（主要是边距..）传递给child-div。

示例请参见http://jsfiddle.net/gaby/pvWHr/。

- Gabriele Petrioli

---

看起来非常不错。我想只需要进行一些微调就可以满足我的需求了。现在我几乎害怕测试跨浏览器兼容性，特别是对IE感到非常担心。 - jAndy

@jAndy，这是我尝试对你的代码进行黑客攻击的结果，假设你更需要一种编辑器的形式...（还对HTML进行了一些添加）http://jsfiddle.net/gaby/5FXBu/3/ - Gabriele Petrioli

@jAndy，啊是的..我觉得IE会是一个问题.. :) - Gabriele Petrioli

@GabyakaGPetrioli：你看有没有办法为包装类创建类似于“标题栏”的东西？ - jAndy

@GabyakaGPetrioli：这是目前为止我的最终版本。http://jsfiddle.net/5FXBu/9/。诀窍在于使用`.wrap:after`而不是`:before`。 - jAndy