Выравнивание нескольких <img> с поплавком

Question

У меня возникли проблемы с выравниванием этих изображений. У меня семь фотографий, и я хочу выровнять их, используя поплавки и очистить. Есть ли какой-либо код в CSS, в котором я исключаю, что элемент подвергается воздействию «чистого» свойства другого элемента? На картинке видно, что я применил «clear: both;» к картине веб-камеры, чтобы позволить ей спуститься вниз «Push The Limit» вместо того, чтобы быть рядом - я не хочу, чтобы другие изображения были затронуты.

Вот мой HTML:

 <div class="imgContainer"> 
     <div class="leftImgs"> 
      <a href=""><img src="Images/Homepage/Zotac_1.png" class="gpu"></a> 
      <a href=""><img src="Images/Homepage/webcam.png" class="webcam"></a> 
      <a href=""><img src="Images/Homepage/combs.png" class="combs"></a> 
     </div>   
     <div class="centerImgs"> 
      <a href=""><img src="Images/Homepage/monitor.png" class="monitor"></a> 
     </div> 
     <div class="rightImgs"> 
      <a href=""><img src="Images/Homepage/kb.png" class="kb"></a> 
      <a href=""><img src="Images/Homepage/headset.png" class="headset"></a> 
      <a href=""><img src="Images/Homepage/mobo.png" class="mobo"></a> 
     </div> 
    </div> 

и мой CSS:

.gpu { 
    width: 33%; 
    margin-bottom: .25%; 
    float: left; 
} 

.webcam { 
    width: 16.25%; 
    margin-right: .5%; 
    float: left; 
    clear: both; 
} 

.combs { 
    width: 16.25%; 
    float: left; 
} 

.monitor { 
    width: 33%; 
    float: left; 
} 

.kb { 
    width: 16.25%; 
    float: right; 
} 

.headset { 
    width: 16.25%; 
    margin-right: .5%; 
    float: right; 
} 

.mobo { 
    width: 33%; 
    margin-top: .25%; 
    float: right; 
    clear: right; 
} 

Answer 1

Вы должны оберток стиль как встроенный блок : например

.leftImgs, 
.centerImgs, 
.rightImgs { 
    display: inline-block; 
    width: 32%; 
} 

Наряду с этим стилем вам необходимо изменить существующие правила следующим образом: изменение 33% до 98% и 16,25% до 49%. После этого он должен выглядеть намного лучше.

Answer 2

Используйте эту последовательность дивы:

<div class="imgContainer clearfix"> 
    <div class="leftImgs"> 
     <a href=""><img src="Images/Homepage/Zotac_1.png" class="gpu"></a> 
     <a href=""><img src="Images/Homepage/webcam.png" class="webcam"></a> 
     <a href=""><img src="Images/Homepage/combs.png" class="combs"></a> 
    </div>   
    <div class="rightImgs"> 
     <a href=""><img src="Images/Homepage/kb.png" class="kb"></a> 
     <a href=""><img src="Images/Homepage/headset.png" class="headset"></a> 
     <a href=""><img src="Images/Homepage/mobo.png" class="mobo"></a> 
    </div> 
<div class="centerImgs"> 
    <a href=""><img src="Images/Homepage/monitor.png" class="monitor"></a> 
</div> 

И это CSS:

// **** clearing floats begins **** // 
.clearfix:after { 
content: " "; 
font-size: 0; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; } 
.clearfix { display: inline-block; } 
.clearfix { display: block; } 
* html .clearfix { height: 1%; } 
.clear { clear: both; } 
// **** clearing floats ends **** // 

.leftImgs{ float:left; width:33%; } 
.rightImgs{ float:right; width: 16%; } 
.centerImgs{ float:none; margin:0 auto; width:51%; } 

Answer 3

я правильно перепроектировать все это и использовать Flexbox вместо плавающих элементов.

Но если вы хотите сделать быстро исправить, попробуйте добавить vertical-align-top в родительских контейнеры вашего анкерный-ссылок (leftImg, centerImg и leftImg).

Я не знаю, как вы в стиле тех, но они могли бы выглядеть следующим образом:

.leftImgs, 
.centerImgs, 
.rightImgs { 
    display: inline-block; 
    width: 33%; 
    vertical-align: top; 
} 

Вы также можете использовать float: left вместо display: inline-block