html - 为什么我的浮动容器在我的 div 下而不是从新行开始

Question

page-button-container即使我正在使用display: block. 它正在我的test-pics-container. 为什么会这样，我该如何解决？我发现如果我float: right从我的重新加载page-button-container它可以工作（但它不会向右浮动。

我希望它看起来像这样：

.test-lookup-container {
  position: relative;
  display: block;
  width: 1000px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 20px 26px;
  box-sizing: border-box;
  background-color: purple;
}

.page-buttons-container {
  position: relative;
  display: block;
  width: 400px;
  height: 70px;
  margin: 0;
  padding: 0;
  float: right;
  background-color: orange;
}

.test-pics-container {
  position: relative;
  display: block;
  width: 900px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 0 26px;
  box-sizing: border-box;
  background-color: red;
}

.test-item {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 700px;
  margin: 0;
  padding: 0;
  background-color: #ececec;
}

<div class="test-lookup-container">
  <div class="page-buttons-container">
    ssssssssssssssss
  </div>
  <div class="test-pics-container">
    <div class="test-item">
      <img alt="" src="test.png">
    </div>
  </div>
</div>

标签： htmlcss

Answer 1

您需要清除浮动元素<div style="clear: both;" ></div>

.test-lookup-container {
  position: relative;
  display: block;
  width: 1000px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 20px 26px;
  box-sizing: border-box;
  background-color: purple;
}

.page-buttons-container {
  position: relative;
  display: block;
  width: 400px;
  height: 70px;
  margin: 0;
  padding: 0;
  float: right;
  background-color: orange;
}

.test-pics-container {
  position: relative;
  display: block;
  width: 900px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 0 26px;
  box-sizing: border-box;
  background-color: red;
}

.test-item {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 700px;
  margin: 0;
  padding: 0;
  background-color: #ececec;
}

<div class="test-lookup-container">
  <div class="page-buttons-container">
    ssssssssssssssss
  </div>
  <div style="clear: both;" ></div>
  <div class="test-pics-container">
    <div class="test-item">
      <img alt="" src="test.png">
    </div>
  </div>
</div>