Question

UPD ：我试过这个，唯一的问题是我无法放置更大的图像。我希望网格的高度更高（双倍）。我尝试将col md值更改为6但不起作用：

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
img {
  border: 0;
}
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  background-color: #fff;
}

img {
  vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 30px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: auto;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}
.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0%;
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }

<section class="main">
    <div class="container grid-custom">
        <div class="row">
            <div class="row col-sm-6">
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/3498db/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/e74c3c/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/f1c40f/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/3498db/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/e74c3c/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/f1c40f/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/3498db/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/e74c3c/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/f1c40f/fff" alt="" class="img-responsive">
                </div>
            </div>
            <div class="col-sm-6">
                <img src="http://placehold.it/600x400/2ecc71/fff" alt="" class="img-responsive center-block">
            </div>
        </div>
    </div>
</section>

我正在尝试创建一个图像网格。更具体地说，我需要2列，其中第一列将有3行，每行将有3列（图像），第二列将有一个图像。

我希望网格能够响应，无论大小屏幕是什么，都看起来都是这样的：

但如果我更改浏览器或屏幕尺寸，它看起来很麻烦：

(function() {

  var img = document.getElementById('one').firstChild;
  img.onload = function() {
    if (img.height > img.width) {
      img.height = '20%';
      img.width = 'auto';
    }
  };

}());

* {
  margin: 0;
  padding: 0;
}
.one,
.two,
.four,
.five,
.six,
.seven,
.eight {
  height: 540px;
  text-align: center;
  border: 1px solid white;
}
.four {
  height: 180px;
}
.container {
  width: 90%;
  margin: 30px auto 0px auto;
}
.container:before,
.container:after {
  content: "";
  display: table;
}
.container:after {
  clear: both;
}
.one {
  float: left;
  width: 33.33333%;
  margin-left: 66.66667%;
  margin-right: -100%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
.nested {
  float: left;
  width: 66.66666%;
  margin-right: 33.333334%;
  margin-right: -100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
  padding-left: 0;
  padding-right: 0;
}
.four {
  clear: left;
  float: left;
  width: 100%;
  margin-left: 0%;
  margin-right: -100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
@media screen and (max-width: 700px) {
  .one {
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
  .nested {
    clear: left;
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    ;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 0;
  }
  .four {
    clear: left;
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
}
img {
  width: auto;
  max-height: 540px;
}
.second {
  width: 33.3334%;
  height: auto;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="nested">
    <div class="four">
      <a href="04.html">
        <img class="second" src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
      </a>
      <a href="05.html">
        <img class="second" src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
      </a>
      <a href="06.html">
        <img class="second" src="http://contabilidadmlm.com/games/wp-content/uploads/2013/10/Captura-de-pantalla-2013-09-02-a-la-2528s-2529-19.19.26-914x576.png" />
      </a>
    </div>
    <div class="four">
      <a href="04.html">
        <img class="second" src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
      </a>
      <a href="05.html">
        <img class="second" src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
      </a>
      <a href="06.html">
        <img class="second" src="http://contabilidadmlm.com/games/wp-content/uploads/2013/10/Captura-de-pantalla-2013-09-02-a-la-2528s-2529-19.19.26-914x576.png" />
      </a>
    </div>
    <div class="four">
      <a href="04.html">
        <img class="second" src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
      </a>
      <a href="05.html">
        <img class="second" src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
      </a>
      <a href="06.html">
        <img class="second" src="http://contabilidadmlm.com/games/wp-content/uploads/2013/10/Captura-de-pantalla-2013-09-02-a-la-2528s-2529-19.19.26-914x576.png" />
      </a>
    </div>

    <div class="one">
      <img class="first" src="http://techno-shop.bg/userfiles/productlargeimages/product_10549.jpg" />
    </div>

  </div>

我尝试使用具有repsonsive网格的不同版本：

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}
/*  COLUMN SETUP  */

.col {
  background: #124;
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}
.col:first-child {
  margin-left: 0;
}
/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1;
  /* For IE 6/7 */
}
/*  GRID OF TWO  */

.span_2_of_2 {
  width: 100%;
}
.span_1_of_2 {
  width: 49.2%;
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
}
@media only screen and (max-width: 480px) {
  .span_2_of_2,
  .span_1_of_2 {
    width: 100%;
  }
}
/*  GRID OF THREE  */

.span_3_of_3 {
  width: 100%;
}
.span_2_of_3 {
  width: 66.66%;
}
.span_1_of_3 {
  width: 33.33%;
}
/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
  .span_3_of_3,
  .span_2_of_3,
  .span_1_of_3 {
    width: 100%;
  }
}
.col2 {
  background: #F1F1F1;
  display: block;
  float: left;
  margin: 0;
  max-height: 100px;
}
.col:first-child {
  margin-left: 0;
}
img {
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  float: left;
}

<div class="section group">
  <div class="col span_1_of_2">
    <div class="section group">
      <div class="col2 span_1_of_3" style="background:#FF0000;">
        <a href="04.html">
          <img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
        </a>
      </div>
      <div class="col2 span_1_of_3">
        <a href="05.html">
          <img src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
        </a>
      </div>
      <div class="col2 span_1_of_3">
        <a href="04.html">
          <img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
        </a>
      </div>
      <div class="section group">
        <div class="col2 span_1_of_3">
          <a href="04.html">
            <img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
          </a>
        </div>
        <div class="col2 span_1_of_3">
          <a href="05.html">
            <img src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
          </a>
        </div>
        <div class="col2 span_1_of_3">
          <a href="04.html">
            <img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
          </a>
        </div>
        <div class="section group">
          <div class="col2 span_1_of_3" style="background:#FF0000;">
            <a href="04.html">
              <img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
            </a>
          </div>
          <div class="col2 span_1_of_3">
            <a href="05.html">
              <img src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
            </a>
          </div>
          <div class="col2 span_1_of_3">
            <a href="04.html">
              <img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col span_1_of_2">
    <a href="04.html">
      <img class="big" src="http://techno-shop.bg/userfiles/productlargeimages/product_10549.jpg" />
    </a>
  </div>
</div>

Answer 1

你可以试试bootstrap响应框架代码如图所示

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      .red, .blue, .yellow {height:50px;border-right:1px solid black;}
      .red{background-color:red;}
      .blue{background-color:blue;}
      .yellow{background-color:yellow;}
      .brown{height:150px;background-color:brown;}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-8">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-4 col-sm-4 col-xs-4 red"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 red"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 red"></div>
          </div>
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-4 col-sm-4 col-xs-4 blue"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 blue"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 blue"></div>
          </div>
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-4 col-sm-4 col-xs-4 yellow"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 yellow"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 yellow"></div>
          </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-4 brown"> 
        </div>
      </div>
    </div>
  </body>
</html>

带图像的响应网格（第1列有3行，第2列有1行）

1 个答案: