gpt4 book ai didi

html - Div 未正确 float 。我不确定我错过了什么

转载 作者:太空宇宙 更新时间:2023-11-04 10:04:31 26 4
gpt4 key购买 nike

我正在为我正在上的类(class)弄乱一些 css 定位,我在使用 float 并排放置两个 div 时遇到了问题。

当我在#first div 上使用float left 时,#second div 不会移动到#first 的右侧。

不确定我做错了什么。

这是 HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div id="first">First</div>
<div id="second">Second</div>
</div>
</body>
</html>

这是 CSS:

html, body, div, p {
padding: 0;
margin: 0;
}
.container {
border: 2px solid black;
width: 1280px;
height: 500px;
margin: 10px auto 0;
}
.container div {
margin: 5px;
padding: 10px;
}
#first {
border: 2px solid red;
width: 25%;
float: left;
}
#second {
border: 2px solid green;
width: 25%;
}

最佳答案

divs 默认情况下是 block 元素,这意味着它们占据了屏幕的整个宽度。要解决此问题,只需将显示样式 inline-block 添加到两个 div。

html, body, div, p {
padding: 0;
margin: 0;
}
.container {
border: 2px solid black;
width: 1280px;
height: 500px;
margin: 10px auto 0;
}
.container div {
margin: 5px;
padding: 10px;
}
#first {
border: 2px solid red;
width: 25%;
display: inline-block;
float: left;
}
#second {
border: 2px solid green;
width: 25%;
display: inline-block;
}
<div class="container">
<div id="first">First</div>
<div id="second">Second</div>
</div>

关于html - Div 未正确 float 。我不确定我错过了什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38133434/

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