html - 在一个 div 中并排显示 3 张图像；随窗口增长和缩小

Question

我正在尝试创建一个包含 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>

Answer 1

Demo

CSS

img {
    position:relative;
    float:left;
    max-width:33.33%;
    width: 33.33%
}