Ausrichten mehrerer <img> mit Float

Question

Ich habe Probleme beim Ausrichten dieser Bilder. Ich habe sieben Bilder und möchte sie mit Floats und Clears ausrichten. Gibt es einen Code in CSS, bei dem ich ein Element von der Eigenschaft "clear" eines anderen Elements ausschließen möchte? Auf dem Bild sieht man, dass ich "klar: beide;" zu dem Webcam-Bild, damit es das "Push The Limit" runtergeht, anstatt dass es direkt daneben steht - ich möchte nicht, dass die anderen Bilder betroffen sind.

Hier ist mein 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> 

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

Sie müssen Stil Wrapper als inline-block verwenden können : z.B

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

Zusammen mit diesem Stil müssen Sie die bestehenden Regeln wie folgt ändern: Ändern Sie 33% zu 98% und 16.25% zu 49%. Danach sollte es viel besser aussehen.

Answer 2

Mit dieser Folge von divs:

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

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

ich Redesign wäre es richtig alle aus und Flexbox statt schwebenden Elemente.

Aber wenn Sie eine schnelle Lösung zu tun, versuchen vertical-align-top zu den übergeordneten Container des Anker-Links(leftImg, centerImg und leftImg) hinzuzufügen.

Ich weiß nicht, wie man diejenigen gestylt haben, aber sie könnte wie folgt aussehen:

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

Sie auch float: left statt display: inline-block