Связанные изображения не плавающие влево

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-мкр-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 ​​рядами.

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