html - 链接的图像不向左浮动

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 也得到了正确的定位，它出现在代码检查器中。显然有一些我不理解的关于 float 的基本知识。

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>