将多个<img/>与浮点对齐

Question

我无法对齐这些图像。我有七张图片，我想通过使用浮动和清除来对齐它们。 CSS中是否有任何代码可以排除某个元素不受其他元素的影响＆＃34; s＆＃34;清除＆＃34;属性？在图片中你可以看到我应用了＆＃34; clear：both;＆＃34;到网络摄像头图片让它下降＆＃34;推动极限＆＃34;而不是它在旁边 - 我不希望其他图像受到影响。

这是我的HTML：

{!! $message !!}

和我的CSS：

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

Answer 1

使用这个div序列：

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

我会正确地重新设计它并使用Flexbox而不是浮动元素。

但是如果你想快速修复，请尝试将vertical-align-top添加到锚链接（leftImg，centerImg和leftImg）的父容器中。

我不知道你是如何设计的，但它们看起来像这样：

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

您也可以使用float: left代替display: inline-block

Answer 3

您需要将包装器设置为内联块：例如

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

除了这种风格，您还需要更改现有规则，如下所示：将33％更改为98％，将16.25％更改为49％。此后它应该看起来好多了。