HTML – 棘手的div堆叠

2023年2月18日 248次阅读

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

aaaaaaaaaaaaaa     ccccccccccccccccccccccccc
bbbbbbbbbbbbbbbbbbbbbbbbbb

当窗口完全打开时,cccccccccccc可以在bbbbbbbbb上面进行调整(即可以适应),因此我希望它这样做,如上所示.

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

aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbb
ccccccccccccccccccccccccccccccc

因此,我不知何故需要将C的默认位置设置在A的右边,但是当没有足够的空间容纳C的全长时,要使C移动到B以下(并且我不希望任何换行).

将A和B放在一起包含< div>然后让C跟随< div>根本不起作用,因为我希望C在它的旁边,在同一条线上,在它的默认位置;如果我将A和B包装成专用的< div>容器,我最终得到：

aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbb   ccccccccccccccccccccccccc

……那不是我想要的. (我也可能最终得到B和C的文本行包装,我试图避免这种情况.)

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

最佳答案 我已经解决了……没有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/

点赞