我正在为我正在上的类(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/