div 没有正确浮动。我不确定我错过了什么答案

【问题标题】：Divs not floating correctly. I'm not sure what I'm missingdiv 没有正确浮动。我不确定我错过了什么
【发布时间】：2016-07-01 05:23:13
【问题描述】：

我正在为我正在学习的课程设置一些 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%;
}

【问题讨论】：

标签： html css positioning

【解决方案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>

【讨论】：