如何使 div 堆叠没有空格并保留较小尺寸的顺序 - 在 Bootstrap 中

Posted 2023-03-06

【中文标题】如何使 div 堆叠没有空格并保留较小尺寸的顺序 - 在 Bootstrap 中

【英文标题】：How to make divs stack without spaces and retain order on smaller sizes - in Bootstrap

【发布时间】：2015-12-05 04:24:28

【问题描述】：

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

当我连续有 2 个 div 时，每个 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 个。

我希望这很清楚。感谢您的帮助。

【问题讨论】：

你能显示代码吗？

据我所知，这是 Bootstrap 3 的一个缺点。您可以查看 masonry.desandro.com 等外部库来满足此需求。或者，Bootstrap 4 似乎也解决了这个问题，尽管这还处于早期测试阶段。

到目前为止使用 Botostrap3 非常复杂，但是，在另一种方法中，您可以通过 Approach 2，然后您可以为 DIV3，（因此一次将有两个 DIV3）并使用 媒体查询，您可以在桌面中隐藏一个 DIV3 实例并显示需要的一个，反之亦然在移动设备中。

@AlvaroMenéndez 如果 OP 使用 Bootstrap，那么 jQuery 已经包含在内 ;-)

我的意思是 div (1) div (2) div (3) div (4) 。所以它在大小尺寸上的顺序都是正确的

【参考方案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>

使用上面sn-p中的整页链接，看看不同屏幕尺寸之间的堆叠是如何变化的

更新

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

不幸的是，它从左到右将 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>

More information on columns

Columns support

【讨论】：

确实不错，但是这种方法使2个调整div的高度相同，不幸的是这不是我需要的。

@user1118829 抱歉，调整 div 是什么？

@user1118829 我已经更新了我的答案，但不幸的是堆叠顺序错误，但它只是给了你一个额外的选择

【参考方案2】：

如果您可以添加 jquery，也许这会有所帮助。您可以添加如下内容：

$(document).ready(function () 
            var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
            $(".left").height(height);
            $(".right").height(height);
        );  

将right 类添加到右侧的 div 中，将left 类添加到左侧的 div 中。这将使两个 div 的高度相同。

唯一的问题可能是当所有div's 在同一列中时，您可能不想要相同的height。不知道您是否可以使jquery 代码仅在窗口大小> 一些像素（可能）时起作用，但您可以将height 强制为auto，!important 在右侧media queries。只是我的 2 美分。

已编辑：我发现 here 您可以根据最大宽度窗口大小使此脚本工作：

function checkPosition() 
    if (window.matchMedia('(max-width: 767px)').matches) 
        //...
     else 
        //...
    

【讨论】：

一个问题：当浏览器调整大小时会发生什么？ （你知道，图形艺术家和设计师喜欢调整浏览器的大小来测试你的响应式布局......）。哦，在 .resize() 上执行该脚本是个坏主意，因为它会给您的客户端带来一些实际负担。我更喜欢 css 方法，它更干净

好吧，老实说，你自己说的是那种“喜欢”调整浏览器大小的人。但是，响应式网页的唯一原因是适应为真正的未来用户显示网络的任何平台，而那些为了娱乐（或学习）而“调整大小”的人是非常少的少数……而且少数人会理解jquery函数的使用。只是我的观点。

^同意。一位过去的客户和我有同样的争论，我的回答与此类似。

【参考方案3】：

修改后的答案

我在这个答案https://***.com/a/32565224/3956566的帮助下整理了一些代码

我用了一个小宽度来演示，就是给你定制的。 还将 css 中的任何更改放在 site.css 文件中，而不是 bootstrap 并在 bootstrap 之后调用 site.css，因此更改会被覆盖。

CSS：

div outline:solid 1px red; 

  .left 
  
  .right 
   

html：

<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 的高度，然后相应地调整边距（仅适用于较大的布局！）； 即

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

div diff = (a-b)

如果差异 >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%;

【讨论】：

我不确定我是否理解您的解决方案，当我再添加 4 个 div 时，会出现垂直间距。请注意，我不知道 div 的高度，它们是动态的

我很穷才能提供这个赏金;）但如果你解决了这个问题，我会很高兴把它给你:)

非常感谢！我会尝试并让你知道:)

非常感谢，我没有时间完全理解它，我不希望赏金过期，但我试过了，它似乎运作良好。伟大的努力:)

【参考方案4】：

正如上面所说的“R Lam”，这是可行的：

<div class="col-lg-6 col-md-6 col-sm-12">
<div>div1</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div>div2</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div>div3</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div>div4</div>
</div>

我想知道是否可以让它们加起来超过 12，但后来我发现了这个问题： question link

其实也没用，还是出现了一些空格..

【参考方案5】：

我们可以通过@media查询来实现

而且你需要为 div 左右添加备用浮动

HTML：

    <div class="wid" style="height:80px;background-color:#ccc;float:left;"> div 1 </div>
    <div class="wid" style="height:100px;background-color:red;float:right;"> div 2 </div>
    <div class="wid" style="height:90px;background-color:yellow;float:left;"> div 3 </div>
    <div class="wid" style="height:120px;background-color:green;float:right;"> div 4 </div>
    <div class="wid" style="height:100px;background-color:#ddd;float:left;"> div 5 </div>

CSS：

.wid
width:50%;


@media screen and (max-width:768px)
.wid
width:100%;

【参考方案6】：

在我看来，您希望您的 div 高度是动态的。这意味着，一行内的所有 div 都应该具有包含更多内容的 div 的高度，因此 div 的高度将取决于可以变化的内容。要实现这一点，您需要的不仅仅是 CSS，还需要一些简单的 JQuery 或 javascript。 使用 JQuery：

<div class="row first-row">
  <div class="col-lg-6 col-md-6 col-sm-12 same-height"> div 1 </div>
  <div class="col-lg-6 col-md-6 col-sm-12 same-height"> div 2 </div>
</div>
<div class="row second-row">
  <div class="col-lg-6 col-md-6 col-sm-12 same-height"> div 3 </div>
  <div class="col-lg-6 col-md-6 col-sm-12 same-height" onload="FixSizeOfRows()"> div 4 </div>
</div>
<script>
  function FixSizeOfRows()
    $('.first-row > .same-height').height($('.first-row').height());
    $('.second-row > .same-height').height($('.second-row').height());
  
</script>

这里的想法是在最后一个 div 完全加载后运行 FixSizeOfRows() 函数。函数FixSizeOfRows() 逐行将行的高度注入其每个子 div（请注意，行高会随着子 div 的内容更多而增加）。

在操作 DOM 时我更喜欢 JQuery 而不是纯 JavaScript。使用 JavaScript，您可以做一些类似但更复杂的事情。如果您需要进一步说明此代码的工作原理，请告诉我。

【讨论】：

感谢您的努力，但我实际上不希望 1 行中的 div 具有相同的高度，因为它们中的一些会有太多的空白空间。

【参考方案7】：

使用这个 jQuery 插件来修复不需要的空间问题：

http://brm.io/jquery-match-height-demo/

【讨论】：

谢谢，但不幸的是我不希望他们有相同的高度。