第二张图片未在2列网格

时间：2016-11-09 22:56:38

标签： html css twitter-bootstrap responsive

我有一个有两列的网格。第一个是宽度的70％，第二个是30％。

在第一列中，我有3行，每行有3列。

问题是我无法垂直对齐两列（首先，我关心的是> 1200px的容器）。第二张图片看起来像这样：

enter image description here

我在下面创建了2个片段。值得全屏使用。

＆＃13;
＆＃13; 
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:0;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 100%;
  }
}

.row {
}
.thumbnail, .column2, .column1 {
  position: relative;
  min-height: 1px;

}
.thumbnail {
  float: left;
}
.thumbnail {
  width: 33.33333333%;
}
@media (min-width: 768px) {
.column2, .column1 {
    float: left;
  }
  .column1 {
    width: 70%;
  }
  .column2 {
    width: 30%;
  }
＆＃13; 
    <div class="container">
        <div class="row">
            <div class="column1">
                <div class="thumbnail">
                    <img src="http://apolosiskos.co.uk/images/grid_grid/pic01.jpg" alt="" class="img-responsive">
                </div>
                <div class="thumbnail">
                    <img src="http://apolosiskos.co.uk/images/grid_grid/pic02.jpg" alt="" class="img-responsive">
                </div>
                <div class="thumbnail">
                    <img src="http://apolosiskos.co.uk/images/grid_grid/pic03.jpg" alt="" class="img-responsive">
                </div>
                <div class="thumbnail">
                    <img src="http://apolosiskos.co.uk/images/grid_grid/pic04.jpg" alt="" class="img-responsive">
                </div>
                <div class="thumbnail">
                    <img src="http://apolosiskos.co.uk/images/grid_grid/pic05.jpg" alt="" class="img-responsive">
                </div>
                <div class="thumbnail">
                    <img src="http://apolosiskos.co.uk/images/grid_grid/pic06.jpg" alt="" class="img-responsive">
                </div>
                <div class="thumbnail">
                    <img src="http://apolosiskos.co.uk/images/grid_grid/pic07.jpg" alt="" class="img-responsive">
                </div>
                <div class="thumbnail">
                    <img src="http://apolosiskos.co.uk/images/grid_grid/pic08.jpg" alt="" class="img-responsive">
                </div>
                <div class="thumbnail">
                    <img src="http://apolosiskos.co.uk/images/grid_grid/pic01.jpg" alt="" class="img-responsive">
                </div>
            </div>
            <div class="column2">
                <img src="http://apolosiskos.co.uk/images/grid_grid/egw.png" alt="" class="img-responsive">
            </div>
        </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
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;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1570px;
  }
}
.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;
}
.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%;
  }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-10 col-sm-7">
    <div class="row">
      <div class="col-xs-4">
        <img src="http://apolosiskos.co.uk/images/grid_grid/pic01.jpg" alt="" class="img-responsive">
      </div>
      <div class="col-xs-4">
        <img src="http://apolosiskos.co.uk/images/grid_grid/pic02.jpg" alt="" class="img-responsive">
      </div>
      <div class="col-xs-4">
        <img src="http://apolosiskos.co.uk/images/grid_grid/pic03.jpg" alt="" class="img-responsive">
      </div>
      <div class="col-xs-4">
        <img src="http://apolosiskos.co.uk/images/grid_grid/pic04.jpg" alt="" class="img-responsive">
      </div>
      <div class="col-xs-4">
        <img src="http://apolosiskos.co.uk/images/grid_grid/pic05.jpg" alt="" class="img-responsive">
      </div>
      <div class="col-xs-4">
        <img src="http://apolosiskos.co.uk/images/grid_grid/pic06.jpg" alt="" class="img-responsive">
      </div>
      <div class="col-xs-4">
        <img src="http://apolosiskos.co.uk/images/grid_grid/pic07.jpg" alt="" class="img-responsive">
      </div>
      <div class="col-xs-4">
        <img src="http://apolosiskos.co.uk/images/grid_grid/pic08.jpg" alt="" class="img-responsive">
      </div>
      <div class="col-xs-4">
        <img src="http://apolosiskos.co.uk/images/grid_grid/pic01.jpg" alt="" class="img-responsive">
      </div>
    </div>
  </div>
  <div class="col-xs-10 col-sm-3">
    <img src="http://apolosiskos.co.uk/images/grid_grid/egw.png">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

并且最后一个有效，但它很小：

1 个答案:

答案 0 :(得分：0)

如何使用verticaly中心项目有更多方法 - flexbox对此非常有用。无论如何，在你的情况下，我想到了这个非常简单的解决方案（对于第一个片段）：

.row {
  position: relative;
  overflow: hidden;
}
div.column2 {
  position: static;
}
.column2 img {
  position: absolute;
  top: 50%;
  max-width: 40%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

我将响应性留给你。 您可能应该为这些样式添加一些特定的类，否则它们将影响所有行和列。

相关问题
最新问题