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

时间:2017-01-13 09:41:34

标签: css css-float clear

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

I believe the picture explains itself

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

3 个答案:

答案 0 :(得分:0)

使用这个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%; }

答案 1 :(得分:0)

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

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

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

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

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

答案 2 :(得分:0)

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

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

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