如何使divs堆栈没有空格并保持较小尺寸的顺序 - 在Bootstrap中

Question

我真的不知道如何用言语表达.

当我连续有2个div时,每个都有不同的高度,所以下一行有不需要的空间.

但是在小屏幕中正确堆叠.

 <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12"> div 1 </div>
    <div class="col-lg-6 col-md-6 col-sm-12"> div 2 </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12"> div 3 </div>
    <div class="col-lg-6 col-md-6 col-sm-12"> div 4 </div>
  </div>

但是当我删除行并将所有div放在左边的1 div中,而所有div放在1 div内的右边时,没有空格.

但是它们在小屏幕上的排列顺序错误.

  <div class="col-lg-6 col-md-6 col-sm-12">
    <div> div 1 </div>
    <div> div 3 </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-12">
    <div> div 2 </div>
    <div> div 4 </div>
  </div>

请注意,它们不仅仅是4个div,它们至少是8个.

我希望这很清楚.我感谢任何帮助.

Answer 1

对于纯css解决方案,如果不使用引导程序样式,则可以使用display:flex:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-div {
  border: 1px solid #000000;
  width: 50%;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .flex {
    flex-direction: column;
  }
  .flex-div {
    width: 100%;
  }
}

<div class="flex">
    <div class="flex-div"> div 1 <br> extra height</div>
    <div class="flex-div"> div 2 </div>
    <div class="flex-div"> div 3 </div>
    <div class="flex-div"> div 4 </div>
</div>

使用上面代码段中的完整页面链接查看不同屏幕尺寸之间堆叠的变化情况

更新

我能得到的最接近你的是:

不幸的是,它首先在左侧的列中堆叠div,在旧的浏览器中不支持:

.columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  padding: 1px;
}
.columns-div {
  border: 1px solid #000000;
}


@media (max-width: 767px) {
  .columns {
  -webkit-column-count: auto;
  -moz-column-count: auto;
  column-count: auto
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}
}

<div class="columns">
  <div class="columns-div">div 1
    <br>extra height</div>
  <div class="columns-div">div 2</div>
  <div class="columns-div">div 3</div>
  <div class="columns-div">div 4</div>
</div>

有关列的更多信息

列支持

Answer 2

修改后的答案

我在这个答案的帮助下整理了一些代码/sf/answers/2279565711/

我用了一个小宽度来演示，供你定制。还将 css 中的任何更改放入 site.css 文件中，而不是引导程序中，并在引导程序后调用 site.css，以便覆盖更改。

CSS：

div {outline:solid 1px red; }

  .left {
 } 
  .right {
 }  

网页：

<div style="display:none">
<div id="1"  class="left" style="height:100px;background-color:yellow;">DIV 1</div>
<div id="2" class="right" style="height:20px;">DIV 2</div>
<div id="3" class="left" style="height:50px;background-color:yellow;">DIV 3</div>
<div id="4" class="right" style="height:170px;">DIV 4</div>
<div id="5" class="left" style="height:120px;background-color:yellow;">DIV 5</div>
<div id="6" class="right" style="height:30px;">DIV 6</div>
<div id="7" class="left" style="height:50px;background-color:yellow;">DIV 7</div>
<div id="8" class="right" style="height:90px;">DIV 8</div>
</div>
<div id="div1" style="width: 50%;float:left;background-color:grey"></div>
<div id="div2" style="width: 50%;float:right;background-color:blue"></div>
<div id="div3" style="width: 100%;float:left;background-color:white"></div>

jQuery：

if ($(window).width() > 400) {
    $('#div1').append($('.left'));
    $('#div2').append($('.right'));
}
if ($(window).width() < 400) {
    $('#div3').append($('#1'));
    $('#div3').append($('#2'));
    $('#div3').append($('#3'));
    $('#div3').append($('#4'));
    $('#div3').append($('#5'));
    $('#div3').append($('#6'));
    $('#div3').append($('#7'));
    $('#div3').append($('#8'));
}


$('#div1').append($('.left'));
$('#div2').append($('.right'));

$( window ).resize(function() {
    if($(window).width()>400){
        $('#div1').append($('.left'));
        $('#div2').append($('.right'));  
    }
    if($(window).width()<400)
    {
        // These need to be added in order, as appending them to the
        // first two divs reorders them.
        $('#div3').append($('#1'));
        $('#div3').append($('#2'));
        $('#div3').append($('#3'));
        $('#div3').append($('#4'));
        $('#div3').append($('#5'));
        $('#div3').append($('#6'));
        $('#div3').append($('#7'));
        $('#div3').append($('#8'));
    }
});

参见小提琴：

https://jsfiddle.net/kermit77/vo439fte/4/

第一个答案

除了计算确定各个 div 高度，然后相应地调整边距（仅适用于较大的布局！）；
IE

div 1 高度 = a，div 2 高度 = b

div 差异 = (ab)

如果差异>0

div 4 上边距 = -diff

别的

div 3 上边距 = -diff;

但是您需要保留奇数 div 高度和偶数 div 高度的运行总计，并进行相应调整。

我已经缩小了宽度来测试它。您需要清除每个第 3 个 div 的左侧，以防止它被放置在右侧。

<div class="row">
    <div class="col-lg-6  col-sm-12" style="height:100px;">DIV 1</div>
    <div  class="col-lg-6  col-sm-12" style="height:80px;">DIV 2</div>
    <div  class="col-lg-6  col-sm-12" style="height:50px;clear:left;">DIV 3</div>
    <div  class="col-lg-6  col-sm-12" style="height:40px;">DIV 4</div>
</div>

对于每第 3 个 div，请清除左侧。

CSS：

div {outline:solid 1px red; }
.row {
    margin-right: 2px;
    margin-left: 2px;
}
@media (min-width: 500px) {
.container {
    max-width: 1170px;
}
.col-lg-6 {
    max-width:50%;
    width: 50%;
    float:left;
    clear:right;
}  
}
@media (min-width: 150px) {
.container {
    max-width: 500px;
}
.col-sm-12 {
    width: 100%;
}
}