Question

我目前制作了一个包含侧边栏和内容的容器，但是当我向侧边栏添加更多文本而不是容器时，第二个侧边栏会向侧面浮动一些。这些是我正在使用的代码。

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

如果我理解这个问题：的 HTML

<div class="container"> <div class="sidebar"> Placeholder <br><hr> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class="content">Placeholder</div> <br> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto eligendi maxime autem debitis eum consectetur odit at exercitationem velit earum sunt nobis laborum. Dignissimos vero accusantium velit rerum voluptatibus?</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; }

DEMO

Answer 2

您正在使用两个具有相同课程的侧边栏。在.css文件中放一个.clear {clear：both}并在侧边栏关闭div之前使用jsut。如果你真的需要两个侧边栏，你必须为它创建另一个规则。 sidebar1，sidebar2有不同的浮点数。将内联块更改为阻止。

Answer 3

更新班级.sidebar

.sidebar {
    background-color: #E9E9E9;
    border: 1px solid #7F7F7F;
    border-radius: 5px;
    box-shadow: 0 1px 0 #949494;
    font-weight: bold;
    height: auto;
    margin-right: 20px;
    margin-top: 10px;
    overflow: hidden;
    padding: 5px;
    text-align: left;
    width: 222px;
}

侧边栏（浮动：左）并不总是向左浮动

3 个答案: