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%
}

Answer 2

http://jsfiddle.net/eQ3cu/1/

*{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} 
#mobileNavHeader{
  width: 100%;
  padding: 1%;
}

img{
  max-width: 33.33%;
  width: 33.33%;
  float: left;
  height: auto;
}

普通css的答案具有正确的css，但如果要为图像添加边距以将它们分开，则需要降低最大宽度/宽度元素。在这些情况下我使用30％作为保证金，但它变得更不可靠。

如果您希望自适应网站查看媒体查询。这将为您打开一个灵活的新世界。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 3

让我们分析一些可能的解决方案。第一个已被指出，但我会分析它。

解决方案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。