棘手的 div 堆叠答案

【问题标题】：Tricky div stacking棘手的 div 堆叠
【发布时间】：2015-10-17 02:53:17
【问题描述】：

我有三个<div>s，A、B 和C。它们都是文本行。基本布局是：

aaaaaaaaaaaaaa     ccccccccccccccccccccccccc
bbbbbbbbbbbbbbbbbbbbbbbbbb

当窗口完全打开时，cccccccccccc 可以在 bbbbbbbbb 上方紧缩（即可以适合），因此我希望它这样做，如上图所示。

但是，当窗口缩小到 A 和 C 不能放在同一行时，我希望 ccccccccccc 移动到 bbbbbbbbb 下方，如下所示：

aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbb
ccccccccccccccccccccccccccccccc

因此，我需要以某种方式将 C 的默认位置设置在 A 的右侧，但是当没有足够的空间容纳 C 的全长时，让 C 移动到 B 下方（我 不要t 想要任何换行）。

将 A 和 B 放在包含 <div> 的 a 中，并让 C 跟随 <div> 根本不起作用，因为我希望 C 在其默认位置上位于同一行上的 A 旁边；如果我将 A 和 B 包装到一个专用的 <div> 容器中，我最终会得到：

aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbb   ccccccccccccccccccccccccc

...这不是我想要的。（我也可能会以 B 和 C 的文本行换行结束，我试图避免这种情况。）

如何才能最有效地完成这项工作？

【问题讨论】：

你应该看看 Bootstrap 的网格系统。这使您可以为每种屏幕尺寸指定您想要的布局。
@Tom a、b 和 c 有固定宽度吗？

标签： html css

【解决方案1】：

我已经解决了...不需要 JQuery，只需明智的样式：

<!DOCTYPE html>
<div style="float:left">AAAAAAAAAAAAAAA&nbsp;&nbsp;&nbsp;</div>
<div style="float:left; width:100%">BBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div style="display:inline-block; vertical-align:top">CCCCCCCCCCCCCCCCCCCCCCCCCCC</div>

在此处查看实际操作： https://jsfiddle.net/TomJS/wj44qqe4/

【讨论】：