将多个 <img> 与浮点数对齐答案

【问题标题】：Aligning Multiple <img> with float将多个 <img> 与浮点数对齐
【发布时间】：2020-06-10 06:54:39
【问题描述】：

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

这是我的 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;
}

【问题讨论】：

您还应该浮动包装器 .leftImgs、.centerImgs 和 .rightImgs
@KeesvanLierop 如果我这样做，图像的尺寸会缩小，并且会遍布整个地方。图片供参考--[链接] (i67.tinypic.com/307vs49.jpg)
您是否尝试将包装器样式设置为内联块：例如.leftImgs, .centerImgs, .rightImgs {display: inline-block; width: 32%;} 无论如何，如果您发布完整的 CSS 规则会更好
有什么特别的原因为什么要设置单个图像而不是容器的样式？
因此，除了我上面评论中的样式，您需要将现有规则更改如下：将 33% 更改为 98% 和 16.25% 更改为 49%

标签： css css-float

【解决方案1】：

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

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

除了这种样式，您还需要将现有规则更改如下：将 33% 更改为 98% 和 16.25% 更改为 49%。此后它应该看起来好多了。

【讨论】：

【解决方案2】：

使用这个 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: "&nbsp;";
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%; }

【讨论】：

它会调整所有图像的大小，并且看起来很小

【解决方案3】：

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

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

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

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

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

【讨论】：

和我上面评论的一样，它会调整所有图像的大小，看起来很小