gpt4 book ai didi

css - 2个div在同一行,但是第二个div加了一个短的宽度后会换行,为什么?

转载 作者:行者123 更新时间:2023-11-28 19:04:38 29 4
gpt4 key购买 nike

以下是并排的2个div。但是一旦 width: 100px 被添加到 #right 中,它们就不会再并排了。第二个 div 将换行到下一行。浏览器的宽度大约为 1200px,所以这不是问题,Firefox 和 Chrome 都会出现这种情况。这是什么原因?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<style>
#left {
width: 100px;
float: left;
}

#right {

}
</style>

<div id='left'>
hello
</div>

<div id='right'>
world
</div>

最佳答案

float 是 CSS 中有趣的东西。它们很容易引起这种混淆。

我建议在您的示例中使用 display:inline-block;(在两个 div 上)而不是 float:left;。它的表现可能更接近您的预期。

关于css - 2个div在同一行,但是第二个div加了一个短的宽度后会换行,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4070799/

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