创建3个完全相等的列，占用浏览器窗口宽度的100％ [英] Creating 3 Perfectly Equal Columns that take up 100% on the Browser Window Width

问题描述

我有3个相同大小的方形图像，它们彼此相邻。我想要的三个图像，总共，占据了浏览器的窗口宽度的所有100％，没有间隙。给每个图像宽度为33.33333333％的工程在Firefox中，但不工作在大多数其他浏览器在一定的宽度，有时可以留下一个小的差距，第三个图像的右边。

$ b $

解决方案

这是一个很多解决方案的问题，此：

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：horizo​​ntal; 
 -webkit-box-orient：horizo​​ntal; 
 box-orient：horizo​​ntal; 
 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％只需使用 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/

I have 3 square images of the same size that are floating next to each other. I want the three images, in total, to take up the full 100% of the browser window width, with no gaps. Giving each image a width of 33.33333333% works in Firefox, but does not work in most other browsers at certain widths, which can sometimes leave a small gap to the right of the 3rd image.

This may be a problem with many solutions, but nothing I've tried so far works reliably.

解决方案

Try this:

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

Demo

http://jsfiddle.net/andresilich/2p8uk/

Single page demo

http://fiddle.jshell.net/andresilich/2p8uk/show/

CSS3 demo

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

Demo

http://jsfiddle.net/andresilich/2p8uk/2/

Single page demo

http://fiddle.jshell.net/andresilich/2p8uk/2/show/

---

Update: (safari, sorta, fix) Safari does not equate 33.33% to 100% like other browsers, you can either use my CSS3 demo, which does the sizing automatically through CSS, or you can encase everything inside a container with a 101% width and just hide that extra 1% with overflow:hidden; off of the third image. Try this:

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

Demo: http://fiddle.jshell.net/andresilich/2p8uk/4/

这篇关于创建3个完全相等的列，占用浏览器窗口宽度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！