Question

我正在尝试对齐多个内嵌图像，左边五个，右边一个（签名），最好不使用浮动。所有图像应垂直对齐（从顶部）。我听说flex-box是一个选项，但我很难正确实现它。

<html>

<style>
/* Social Media Buttons */
.social_media_logos { 
    display: inline-block;
    margin: 0 5px; 

}

#signature{
    vertical-align: top;
}

</style>

<div class="social_media_logos">

    <!-- LinkedIn -->
    <a href="https://www.linkedin.com/in/mahdi-al-husseini-0aa98678/"><img src="https://c1.staticflickr.com/5/4292/35304750524_b7a7b46958_o.png" alt="" width= "50" height= "50" /></a>

    <!-- Instagram -->
    <a href="https://www.instagram.com/alhusseinimahdi/"><img src="https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.png" alt="" width="50" height="50" /></a>

    <!-- GitHub -->
    <a href="https://github.com/csapidus"><img src="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png" alt="" width="50" height="50" /></a>

    <!-- News Columns -->
    <a href="columns.html"><img src="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png" alt="" width="50" height="50" /></a>

    <!-- Resume -->
    <img id="Img1" src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png" alt="" width="50" height="50" />

    <!-- Signature -->
    <img id = "signature" src="https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.png" alt="" width="150" height="150" /> 

</div>

</html>

Answer 1

所以这是使用flexbox的解决方案：

将display: flex添加到social_media_logos并为其align-items: center提供垂直对齐。
添加margin-left: auto将签名推向右侧，将其他图标推向左侧。

见下面的演示：

/* Social Media Buttons */
.social_media_logos { 
    display:flex;
    align-items: center;
    margin: 0 5px;
}

#signature{
   margin-left:auto;
}

<div class="social_media_logos">
            
    <!-- LinkedIn -->
    <a href="https://www.linkedin.com/in/mahdi-al-husseini-0aa98678/"><img src="https://c1.staticflickr.com/5/4292/35304750524_b7a7b46958_o.png" alt="" width= "50" height= "50" /></a>

    <!-- Instagram -->
    <a href="https://www.instagram.com/alhusseinimahdi/"><img src="https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.png" alt="" width="50" height="50" /></a>

    <!-- GitHub -->
    <a href="https://github.com/csapidus"><img src="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png" alt="" width="50" height="50" /></a>

    <!-- News Columns -->
    <a href="columns.html"><img src="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png" alt="" width="50" height="50" /></a>

    <!-- Resume -->
    <img id="Img1" src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png" alt="" width="50" height="50" />

    <!-- Signature -->
    <img id = "signature" src="https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.png" alt="" width="150" height="150" /> 

</div>

Answer 2

这是你的意思吗？

Array
(
    [30] => Array
    (
        [count] => 3
    )

    [45] => Array
    (
        [count] => 7
    )
)

我将左侧的所有图标包装在一个容器中，并使用弹性框将签名和图标容器推到主容器的内部。

将多个内嵌图像块对齐到左侧和右侧

2 个答案: