Question

我需要一些复杂的CSS布局问题的帮助。如果它只能用CSS完成，而不是理想的javascript。

我需要一个不同高度的产品网格
还有一个“特色产品”，是其中一种常规产品的高度的两倍
不同视口的布局需要与下面的图像相匹配

到目前为止我尝试了什么：

以下是我现在的代码示例：

<div class="container">
<div class="row">
  <div class="l-product large col-xs-6 col-sm-6 col5-md-2 ">
    1
    <br>This div should be double the height of one tile without fixing the height with CSS
  </div>
  <div class="l-product taller col-xs-6 col-sm-3 col5-md-1">
    2
    <br><span>If one div is taller the whole grid breaks</span>
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    3
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    4
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    5
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    6
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    7
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    8
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    9
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    10
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    11
  </div>
</div>

http://codepen.io/anon/pen/pJBbPN

我正在使用bootstrap所以我尝试嵌套这样的行Nested rows with bootstrap grid system?我的问题是我无法弄清楚如何让项目在不同的视口中从一行移动到另一行而导致网格中断

桌面：

片剂：

小平板电脑：

移动

Answer 1

我不确定你能用基本的引导程序做到这一点。我建议使用更先进的技术，例如Masonry。转到示例链接时，请更改浏览器宽度。它还增加了一些不错的动画效果。

＆＃13;

// external js: masonry.pkgd.js

$(document).ready(function() {

  $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 130
  });

});

＆＃13;

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #EEE;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 120px;
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  margin: 5px;
}

.grid-item--width2 { width: 250px; }

.grid-item--height2 { height: 250px; }

＆＃13;

<h1>Masonry - columnWidth</h1>

<div class="grid">
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

＆＃13;

Answer 2

如果您正在使用列，则需要将列除以12.因此我们希望得到偶数，5不会分解为12列。

请尝试以下方法查看结果。我在小盒子里加了6盒。

<div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="big-box">image</div>
            </div>
            <div class="col-xs-6">
                <div class="row">
                    <div class="col-xs-4"><div class="mini-box">1</div></div>
                    <div class="col-xs-4"><div class="mini-box">2</div></div>
                    <div class="col-xs-4"><div class="mini-box">3</div></div>

                </div>
                <div class="row">
                    <div class="col-xs-4"><div class="mini-box">1</div></div>
                    <div class="col-xs-4"><div class="mini-box">2</div></div>
                    <div class="col-xs-4"><div class="mini-box">3</div></div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2"><div class="mini-box">1</div></div>
            <div class="col-xs-2"><div class="mini-box">2</div></div>
            <div class="col-xs-2"><div class="mini-box">3</div></div>
            <div class="col-xs-2"><div class="mini-box">4</div></div>
            <div class="col-xs-2"><div class="mini-box">5</div></div>
            <div class="col-xs-2"><div class="mini-box">6</div></div>

            </div>
        <div class="row">
            <div class="col-xs-2"><div class="mini-box">1</div></div>
            <div class="col-xs-2"><div class="mini-box">2</div></div>
            <div class="col-xs-2"><div class="mini-box">3</div></div>
            <div class="col-xs-2"><div class="mini-box">4</div></div>
            <div class="col-xs-2"><div class="mini-box">5</div></div>
            <div class="col-xs-2"><div class="mini-box">6</div></div>

        </div>
        </div>

这是jsfiddle

或者您可以将网格系统与jQuery一起使用

在bootstrap网格中围绕大div包装div

2 个答案: