软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

css – 创建3个完全相等的列,占据浏览器窗口宽度

收集整理的这篇文章主要介绍了css – 创建3个完全相等的列,占据浏览器窗口宽度的100%,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有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/divhtml,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/

总结

以上是为你收集整理的css – 创建3个完全相等的列,占据浏览器窗口宽度的100%全部内容,希望文章能够帮你解决css – 创建3个完全相等的列,占据浏览器窗口宽度的100%所遇到的程序开发问题。