gpt4 book ai didi

html - CSS 容器不会拉伸(stretch)以容纳 float

转载 作者:技术小花猫 更新时间:2023-10-29 11:59:50 25 4
gpt4 key购买 nike

<html>

<head>

<style type="text/css">

.container {
width: 900px;
border: 2px solid #333333;
padding-top: 30px;
padding-bottom: 30px;
}

.container_left {
border: 2px solid #FF00FF;
width: 650px;
float: left;
}

.container_right {
border: 2px solid #0000FF;
width: 225px;
float: right;
}

</style>
</head>

<body>

<div class="container">
<div class="container_left">
<div>LEFT CONTAINER</div>
<div>LEFT CONTAINER</div>
<div>LEFT CONTAINER</div>
</div>

<div class="container_right">
<div>RIGHT CONTAINER</div>
<div>RIGHT CONTAINER</div>
<div>RIGHT CONTAINER</div>
</div>
</div>

</body>
</html>

结果是:
result

我想要这样的结果:
desired result

最佳答案

overflow: hidden; 添加到 .container 选择器。这将强制容器承认它有 child 。

关于html - CSS 容器不会拉伸(stretch)以容纳 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2021283/

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