创建3个完全相等的列,占浏览器窗口宽度的100%

Question

我有3个相同大小的方形图像,它们彼此相邻.我希望这三个图像总共占据浏览器窗口宽度的100%,没有间隙.给每个图像宽度为33.33333333%在Firefox中有效,但在大多数其他浏览器中以某些宽度不起作用,这有时会在第3张图像的右侧留下一个小间隙.

这可能是许多解决方案的问题,但到目前为止我没有尝试过任何可靠的工作.

Answer 1

试试这个:

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,修复)Safari不像其他浏览器那样等同33.33%到100%,你可以使用我的CSS3演示,它通过CSS自动调整大小,或者你可以将所有内容包装在容器中101%宽度,只是隐藏overflow:hidden; 第三个图像额外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;
}

演示:http://fiddle.jshell.net/andresilich/2p8uk/4/