CSS 未清除 div 移动/响应式设计中的元素

Question

我们正在处理一个项目，但似乎无法让响应式 div 正确运行。它们运行进入页面上的其他 div 元素，而不是清除它们。我们正在使用 bootstrap 4.3.1，我们需要一些帮助

这里是 the webpage 这样您就可以看到发生了什么。

如有任何帮助，我们将不胜感激！

/* Create two equal columns that floats next to each other */

.column_left {
  float: left;
  width: 50%;
  padding: 10px;
  height: 250px;
  margin-bottom: 5px;
  border-radius: 10px;
  background: #E6E6E8;
}

.column_right {
  float: right;
  width: 50%;
  padding: 5px;
  height: 250px;
  margin-bottom: 5px;
  border-radius: 10px;
  background: #E6E6E8;
}

.setADS {
  float: right;
  margin: 0px;
}


/* Clear floats after the columns */

.setADS:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column_left,
  .column_right {
    width: 100%;
    bottom: 0;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="setADS">
  <div class="column_left" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column_right" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column_left" style="background-color:#aaa;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="column_right" style="background-color:#bbb;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>

Answer 1

尝试为所有要放在一起的项目创建一个通用的 class 名称，并使用 flex:50%

.item {
  width: 100%
}

.root {
  display: flex;
  flex-wrap: wrap;
}

.root > div {
  flex: 50%; /* or - flex: 0 50% - or - flex-basis: 50% - */
  box-shadow: 0 0 0 1px black;
  margin-bottom: 10px;
}

<div class="root">
  <div class="item">Content 1</div>
  <div class="item">Content 2</div>
  <div class="item">Content 3</div>
  <div class="item">Content 4</div>
</div>

类似的东西

Answer 2

它不是 100% 清楚你想要什么，但是如果你添加 overflow: auto; 到 #public-listings 元素，这将 include 它的浮动子元素和因此将后续元素放在下面，以防止所描述的重叠。

Answer 3

你的页面结构不对。这就是为什么你也会遇到问题，如果你解决了这个问题，你之后也会遇到问题我会给你一个基本结构，你可以从那里开始或者把你的代码块放在那个结构中。

同样在 column1 column2 中...如果要删除 blocks/columns 之间的间距，请不要使用自定义样式，只需使用 bootstrap 中预定义的 class 和行 [=22] =] 即 no-gutter

在你的页眉之后放置这个结构。

<div class="container-fluid">
  <div class="row">
    <div class="col-md-7">
      ... put your listing here.
    </div>
    <div class="col-md-5">
      <!--Below is the solution for your divs column1, column2 .....-->
    <div class="row no-gutter">
      <div class="col-md-6">column 1</div>
      <div class="col-md-6">column 2</div>
    </div>
    <div class="row no-gutter">
      <div class="col-md-6">column 3</div>
      <div class="col-md-6">column 4</div>
    </div>
    </div>
  </div>
</div>

CSS 未清除 div 移动/响应式设计中的元素

CSS not clearing div elements on mobile / responsive design

html

css

responsive-design

bootstrap-4