Question

我正忙着为我上课时的一些css定位而且我在使用float并排放置两个div时遇到了麻烦。

当我在#first div上使用float时，＃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%;
}

Answer 1

默认情况下，

divs是块元素，这意味着它们占据了屏幕的整个宽度。要解决此问题，只需将显示样式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>

Div没有正确浮动。我不确定我错过了什么

1 个答案: