Question

我确信这很明显，但我无法理解。我想像这样创建一个图像网格：

[Image] [Image] | [   Big
[Image] [Image] |    Image   ]

我可以用图像做得很好，但问题是图像嵌套在链接中。所以我想弄清楚如何使链接浮动。

我的HTML是：

<div class="row">
<div class="col-md-6">
    <a href="img/1-1full.png" title="" data-gallery>
        <img src="img/1-1.png" alt="">
    </a>
    <a href="img/1-2full.png" title="" data-gallery>
        <img src="img/1-2.png" alt="">
    </a>
    <a href="img/1-3full.png" title="" data-gallery>
        <img src="img/1-3.png" alt="">
    </a>
    <a href="img/1-4full.png" title="" data-gallery>
        <img src="img/1-4.png" alt="">
    </a>
</div>
<div class="col-md-6">
    <a href="img/1-largefull.png" title="" data-gallery>
        <img src="img/1-large.png" alt="">
    </a>
</div>
</div>
<div style="clear: both;">

我的CSS是：

.gallery .col-md-6 a {
    float: left;
    display: block;
}

.gallery .col-md-6 a:nth-child(odd) {
    width: 307px;
    margin: 0 30px 30px 0;
}

.gallery .col-md-6 a:nth-child(even) {
    width: 278px;
    margin: 0;
}

每个col-md-6的宽度为585像素，因此它们应该配合在一起。 .gallery也正确定位，它出现在代码检查器中。显然有一些关于花车的基本知识，我不理解。

Answer 1

如果您已经在使用网格框架（Bootstrap），为什么不利用它。这是一个额外的标记，但我认为它实现了你正在寻找的东西。

<div class="row">
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-6">
        <a href="img/1-1full.png" title="" data-gallery>
          <img src="img/1-1.png" alt="" class="img-responsive">
        </a>
      </div>
      <div class="col-md-6">
        <a href="img/1-2full.png" title="" data-gallery>
          <img src="img/1-2.png" alt="" class="img-responsive">
        </a>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <a href="img/1-3full.png" title="" data-gallery>
          <img src="img/1-3.png" alt="" class="img-responsive">
        </a>
      </div>
      <div class="col-md-6">
        <a href="img/1-4full.png" title="" data-gallery>
          <img src="img/1-4.png" alt="" class="img-responsive">
        </a>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <a href="img/1-largefull.png" title="" data-gallery>
      <img src="img/1-large.png" alt="" class="img-responsive">
    </a>
  </div>
</div>

Answer 2

这对你有用吗？我给出了两个例子，看看你的布局。一个有4行，另一个有2行。

＆＃13;

* {box-sizing: border-box;}
.half {width: 50%;}
.quat {width: 25%;}
.sz34 {width: 75%;}
.cols {float: left;}
img {width: 100%; height: 65px; display: block; border: 1px solid #ccc;}
.parent {overflow: hidden;}
.parent div {float: left;}
img.double-height {height: 130px;}

＆＃13;

<div class="parent">
  <div class="half">
    <div class="quat"><img src="" alt="Image"></div>
    <div class="quat"><img src="" alt="Image"></div>
    <div class="quat"><img src="" alt="Image"></div>
    <div class="quat"><img src="" alt="Image"></div>
    <div class="quat"><img src="" alt="Image"></div>
    <div class="quat"><img src="" alt="Image"></div>
    <div class="quat"><img src="" alt="Image"></div>
    <div class="quat"><img src="" alt="Image"></div>
  </div>
  <div class="half">
    <img src="" alt="Image" class="double-height">
  </div>
</div>

<hr />

<div class="parent">
  <div class="half">
    <div class="half"><img src="" alt="Image"></div>
    <div class="half"><img src="" alt="Image"></div>
    <div class="half"><img src="" alt="Image"></div>
    <div class="half"><img src="" alt="Image"></div>
  </div>
  <div class="half">
    <img src="" alt="Image" class="double-height">
  </div>
</div>

＆＃13;

链接图像不向左浮动

2 个答案: