我有3个相同尺寸的正方形图像相互浮动。我想要三个图像，总共占据了浏览器窗口宽度的100％，没有间隙。给每个图像的宽度为33.33333333％在Firefox中工作，但在大多数其他浏览器中的某些宽度不起作用，有时可能会在第三个图像的右侧留下一个小间隙。
这可能是许多解决方案的问题，但我迄今为止所尝试的工作可靠。
解决方法
尝试这个：
HTML
<div class="container">
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
</div>
CSS
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
.container {
width:100%;
}
.column {
width:33.33333333%;
float:left;
}
.column img {
width:100%;
height:auto;
}
演示
http://jsfiddle.net/andresilich/2p8uk/
单页演示
http://fiddle.jshell.net/andresilich/2p8uk/show/
CSS3演示
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
.container {
display:-moz-Box;
display:-webkit-Box;
display:Box;
-moz-Box-orient:horizontal;
-webkit-Box-orient:horizontal;
Box-orient:horizontal;
width:100%;
}
.column {
-moz-Box-flex:1;
-webkit-Box-flex:1;
Box-flex:1;
background-color:#ddd;
}
.column img {
width:100%;
height:auto;
}
演示
http://jsfiddle.net/andresilich/2p8uk/2/
单页演示
http://fiddle.jshell.net/andresilich/2p8uk/2/show/
更新：(safari，sorta，fix)
Safari不像其他浏览器那样将33.33％等同于100％，您可以使用我的CSS3演示，通过CSS自动进行大小调整，或者您可以将所有内容都放在具有101％宽度的容器中，并且只能隐藏额外的1％溢出：隐藏;关闭第三个图像。尝试这个：
<div class="container">
<div class="inner">
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
</div>
</div>
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
.container {
width:100%;
}
.inner {
width:101%;
overflow:hidden;
}
.column {
width:33.33333333%;
float:left;
}
.column img {
width:100%;
height:auto;
}
