html - 两个带文本的 div 框 1 和 2,位于第三个 div 框内。有时框 1 中的文本比框 2 中的文本长

标签 html css css-float

目前我有两个带文本的 div 框 1 和 2,在第三个 div 框内将它们包含在一起。

Sometimes text in box 1 is longer than text inside box2 - I want text to flow around box2.
Sometimes text in box 2 is longer than text inside box1 - I want text to flow around box1.

文本始终沿方向流动,具体取决于 float 设置

文本较多的框如何包围文本较少的框?

这是如何使用 CSS 完成的?

谢谢!

最佳答案

因为它们在两个 div 中,所以它们不能相互环绕,因为 div 只能有 4 个边,无论是矩形还是正方形,它们不能相互环绕。

你需要做的是只有一个内部 div,用文本填充它并使其 float ,然后将其他文本放在 float div 之外但仍在最外层 div 内,这样基本上自由流动文本的父级是最外面的 div,里面的 div 里面有它自己的文本。

这将允许外部文本围绕内部 div 及其内容流动,但是没有办法让 2 个 div 并根据内容长度自动让它们相互环绕。

编辑:

如果您使用 jQuery,您将能够首先在隐藏元素中设置两个文本,测量内容,然后将较短的内容附加到内部 div,将较长的内容附加到该 div 的外部,以便它环绕它。

关于html - 两个带文本的 div 框 1 和 2,位于第三个 div 框内。有时框 1 中的文本比框 2 中的文本长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11642619/

相关文章:

css - 将 div 与另一个 div 对齐

html - 如何固定表格内的范围

javascript - 使 HTML <td> 类似于 Zurbs 响应式表格

html - 按钮上从底部到顶部的悬停过渡不起作用

php - 我怎样才能让这个 div 在 IE8 中扩展并溢出它的容器?

CSS:从液态到固定以实现更小的分辨率

html - 在响应式设计中, float div 不会向左对齐

html - 在按钮上使用 display flex 使其在 Firefox 中换行

Jquery 显示/隐藏不工作

html - 为什么我的各种 HTML 表格都有不同的宽度?