我不能在一行中显示几个DIV.显示：inline-block和float：left不起作用我的网站宽度不是固定的,所以我希望它是动态的适合任何宽度的屏幕.
HTML：
<div id="all">
<div id="a">25px</div>
<div id="b">200px</div>
<div id="c">
<div id="c1">100%</div>
<div id="c2">100%</div>
<div id="c3">100%</div>
</div>
500px
</div>
CSS：
DIV {
margin:5px;
font-size:10px;
}
DIV#all {
width:500px;
border:1px dotted black;
}
DIV#a {
display:inline-block;
width:25px;
height:200px;
border:1px solid red;
color:red;
}
DIV#b {
display:inline-block;
width:150px;
height:200px;
border:1px solid green;
color:green;
}
DIV#c {
display:inline-block;
width:auto;
height:200px;
border:1px solid blue;
color:blue;
}
DIV#c1 {
width:auto;
border:1px dotted blue;
color:blue;
}
DIV#c2 {
width:auto;
border:1px dotted blue;
}
DIV#c3 {
width:auto;
border:1px dotted blue;
color:blue;
}
现场演示：
>问题：http://jsfiddle.net/BC2d9/
> RESOLVED：http://jsfiddle.net/RAds3/(显示：表)
解决方法
您当前尝试的问题是宽度：100％;在第三列div#c. 100％这里将是其父母的100％ – 其中包含所有三列.根据你想要的灵活程度,你有几个选择.
如果站点宽度固定,则为第三列设置固定宽度.
如果希望第三列扩展到其内容,请设置max-width.
如果你想让第三列伸展来填充它的父代,你可能更喜欢(css)表.
查看http://somacss.com/cols.html在css列布局上的一个很好的资源.
