html - div中并排显示3张图片；随着窗口增长和收缩

我正在尝试创建一个并排有3个图像的div。我希望这些图像能够随着窗口大小而增大和缩小，但始终并排放置。

我已经尝试了许多不同的方法，但这是我的出发点。它们并排显示，但它们不在屏幕上。一个人会开始缩小一点，但仅此而已。

#mobileNavHeader {
    display: block !important;
    white-space: nowrap;
    width: 100%;

    div {

        margin-left: auto;
        margin-right: auto;
        max-width: initial;
        img {
            max-width: 100%;
            width: auto;
            height: auto;
        }
    }

}



<div id="mobileNavHeader">
    <div>
        <a href="#mobileNav"><img src="/images/mobile-menu.png" id="mobileNavButton" /></a><img src="/images/mobile-logo.png" id="mobileLogo" /><a href="#"><img src="/images/mobile-search.png" id="mobileSearch" /></a>
    </div>
</div>

最佳答案

让我们分析一些可能的解决方案。第一个已经指出，但我将对其进行分析。

解决方案1

img {
    float:left;
    min-width:33%;
    height:auto;
}

是的，float:left;很好，但是有问题。每次有多个元素浮动时，您都需要在它们之后添加<div style="clear:both;"></div>来修复页面的其余部分，该部分可能不会像您希望的那样显示。

我通常更喜欢这种解决方案，除非出于某些原因不允许使用块：

解决方案2

img {
    display:inline-block;
    margin:0;
    min-width:33%;
    height:auto;
}

分析


在这种情况下，min-width比max-width更适合：如果每个元素都至少要占页面的1/3，并且您有3个元素，那就很好了。
height:auto将调整图像的大小，因此不会被拉伸；
margin:0是可选的：使用display:inline-block时，在每个块之间添加4个空白像素。该CSS只会删除它们。
display:inline-block更干净，使用后不需要“修复”。


这是Fiddle。