html - 如何防止div移动另一个div

Question

我有两个 2 div。当选中复选框时，第一个 div 会附加数据。现在，当我将数据附加到第一个 div 时，它会不断将第二个 div 推到其下方。我尝试设置第一个 div 的高度和溢出，这样它就不会将 div 推到它下面，但它仍然会这样做。我怎样才能解决这个问题，这样即使第一个 div 被填充，它也不会插入下面的 div。

.panel-emp {
  height: 50%
}

<div class="col-xs-12 col-sm-4">
  <div class="panel-emp">
    <div style="overflow:scroll; height:70%;" class="panel_order">
    </div>
  </div>
  <div class="row" class="panel_2">
    <div class="col-md-8">
    </div>
  </div>

Answer 1

您遇到了很多问题，但其中大部分都归结为引导网格使用不当。

• 一个 div 上有两个类属性。
• 您正在一个 div 上定义一个引导行，并将其放置在另一个 div 旁边。
• 您的引导断点类语法很糟糕，您混合了小型和中型。
• 您没有正确地将列嵌套在行中。

此示例将 panel_emp 和 panel_2 div 放入使用引导类彼此相邻定位的列中。在超小屏幕上，它们具有相同的宽度(6 列)。在小屏幕和大屏幕上，它们分别有 8 列和 4 列。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <div class="col-xs-6 col-sm-4">
      <div class="panel-emp">Panel Emp</div>
  </div>
  <div class="col-xs-6 col-sm-8">
      <div class="panel_2">Panel 2</div>
  </div>
</div>

推荐阅读:

https://v4-alpha.getbootstrap.com/layout/grid/