Question

我有两个相邻的块，一个大块，一个小块。较小的可以扩展（它可以扩展多少是可变的）。当它展开时，第3个div的顶部（第一个块下的宽度相同）正在移动，因此顶部与扩展div的底部匹配。我需要的是将第三个块留在第一个块的底部。

我尝试将块1和3放在一个col-md-8中，将第二个块放在col-md-4中。这在移动设备上有效，但是我需要在第一块和第三块之间扩展块。我也尝试过从引导程序查看卡片列，但是我无法定义宽度或更改手机上的外观顺序。

我摆弄一个小提琴来显示问题：https://jsfiddle.net/k53rnvpb/1/

$('.expand').click(function() {
  $('.block-2').toggleClass('height-300');
})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

[class^="col-"] {
  border: solid 1px #6c757d;
  padding: 10px;
}

.block-1 {
  height: 200px;
}

.block-2 {
  height: 150px;
}

.block-3 {
  height: 200px;
}

.height-300 {
  height: 300px;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-8 block-1">
      Block 1
    </div>
    <div class="col-12 col-sm-4 block-2">
      Block 2
      <p>I need to be between block 1 and 3 on mobile</p>
      <button class='btn btn-primary expand'>Expand</button>
    </div>
    <div class="col-12 col-sm-8 block-3">
      Block 3
      <p>If block 2 expands i still need to be attached to block 1</p>
    </div>
  </div>
</div>

所以我要么需要在另一个扩展时阻止底部的块移动，要么我需要找到一种干净的方法来将扩展div放在移动设备的其他2个块之间（当我将大块放在col中时） -md-8和在col-md-4中展开）

我希望问题已经解决，并预先感谢。

Answer 1

我在第二个扩展DIV中添加了一个额外的<div class="expander">，并将 height扩展更改为该内部div。我希望它现在能按您想要的方式工作。

在CSS的末尾，有一个媒体查询。微调，使其与您的小屏幕分辨率完美匹配。

由于不包含引导程序，因此无法在代码段中正常运行。在您的代码中尝试一下。

$('.expand').click(function(){
	$('.expander').toggleClass('height-300');
})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

[class^="col-"],
.expander{
  border: solid 1px #6c757d;
  padding: 10px;
}
.block-1{
    height: 200px;
}
.block-2{
    height: 150px;
    border: none;
    padding: 0;
}
.block-3{
    height:200px;
}
.height-300{
    height: 300px;
}

/*Fine tune this media query based on your desired mobile resolution*/
@media screen and (max-width: 600px){
  .block-2{
    height: auto;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-12 col-md-8 block-1">
            Block 1
        </div>
        <div class="col-12 col-md-4 block-2">
          <div class="expander">
          Block 2
            <p>I need to be between block 1 and 3 on mobile</p>
            <button class='btn btn-primary expand'>Expand</button>
          </div>
        </div>
        <div class="col-12 col-md-8 block-3">
            Block 3
            <p>If block 2 expands i still need to be attached to block 1</p>
        </div>
    </div>
</div>

Answer 2

有两种方法。一种是使用重复的div内容，但这并不有效。这是另一种解决方案。通过使用媒体查询。需要注意的一件事是，您已为列指定了边框，而我已将边框用于内容潜水。

这解决了两个问题。 1.扩展div不会影响高度 2.第2块将保留在第1块和第3块的中间

$('.expand').click(function() {
  $('.block-2').toggleClass('height-300');

})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

[class^="col-"] {
  border: solid 1px #6c757d;
  padding: 10px;
}

.block-1 {
  height: 200px;
  clear: both;
}

.block-2 {
  height: 150px;
  position: absolute;
  border: solid 1px red;
}

@media only screen and (max-width: 767px) {
  .block-2 {
    position: relative;
  }
}

.block-3 {
  height: 200px;
}

.height-300 {
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 block-1">
      Block 1
    </div>
    <div class="col-12 col-md-4" style="padding: 0;">
      <div class=" block-2">
        Block 2
        <p>I need to be between block 1 and 3 on mobile</p>
        <button class='btn btn-primary expand'>Expand</button>
      </div>
    </div>
    <div class="col-12 col-md-8 block-3">
      Block 3
      <p>If block 2 expands i still need to be attached to block 1</p>
    </div>
  </div>
</div>

https://jsfiddle.net/g21eqyxn/11/

当旁边的另一个div扩展时，如何防止div移动

2 个答案: