gpt4 book ai didi

html - 如果没有足够的空间,自动将 div 换行

转载 作者:太空宇宙 更新时间:2023-11-04 03:28:43 24 4
gpt4 key购买 nike

我正在尝试使用 div 创建一个两列布局。父div是X像素,那么它有太多的子div,每个都占父div的一定百分比。

当我在不使用 javascript 的情况下减小浏览器的宽度时,我希望 div2 在 div1 下换行。

来自:


|分区 1 |第 2 部分 |

|第 1 部分 |

|第 2 部分 |

这就是我目前所拥有的,我应该怎么做才能实现这一目标?

<html>
<body>

<div style="width:200px; margin-top: 30px; border: 1px solid green; overflow: auto;">
<div style="background-color:red; width:100px; float:left;" >
test
</div>
<div style="background-color:yellow;">
test2
</div>
</div>
</body>
</html>

提前致谢!

最佳答案

您需要 float 两个 div。

CSS

.container div {
padding: 20px;
float: left;
border:1px solid #aaa;
}

HTML

<div class="container">
<div>test1</div>
<div>test2</div>
</div>

这是一个 demo .

关于html - 如果没有足够的空间,自动将 div 换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26664023/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com