html - 边栏( float : left) not always floating left

Question

我目前制作了一个包含侧边栏和内容的容器，但是当我向侧边栏添加的文本多于向容器添加的文本时，第二个侧边栏会稍微 float 到一边。这些是我正在使用的代码。

HTML:

<div class="container">
    <div class="sidebar">
        Placeholder
        <br><hr>
        Test
    </div>
    <div class="content">Placeholder</div>
    <br>
    <div class="sidebar">Placeholder</div>
</div>

CSS

.sidebar {
  width: 222px;
  height: auto;
  background-color: #E9E9E9;
  border-radius: 5px;
  border: 1px solid #7F7F7F;
  box-shadow: inset 0px 1px 0px #FDFDFD;
  box-shadow: 0px 1px 0px #949494;
  margin-right: 20px;
  padding: 5px;
  float: left;
  text-align: left;
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
}
.content {
  width: 666px;
  height: auto;
  background-color: #E9E9E9;
  border-radius: 5px;
  border: 1px solid #7F7F7F;
  box-shadow: inset 0px 1px 0px #FDFDFD;
  box-shadow: 0px 1px 0px #949494;
  padding: 5px;
  float: right;
  text-align: left;
  display: inline-block;
  margin: auto;
  margin-top: 10px;
}
.container {
  width: 932px;
  text-align: center;
  margin: auto;
}

Answer 1

您正在使用同一个类的两个侧边栏。在您的 css 文件中放置 .clear {clear:both} 并在侧边栏关闭 div 之前使用 jsut。如果你真的需要两个侧边栏，你必须为它创建另一个规则。侧边栏 1、侧边栏 2 具有不同的 float 。将内联 block 更改为 block 。