链接的图像不向左浮动

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

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

* {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;}

<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>

Answer 2

如果您已经在使用网格框架 (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>

链接的图像不向左浮动

Linked images not floating left

html

css

css-float