DIV内联块+宽度100%

Question

我不能在一行中显示几个DIV.display: inline-block并且float: left不起作用.我的网站宽度不是fixed那么我希望它是动态的适合任何宽度的屏幕.

---

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/

• 决议: http ://jsfiddle.net/RAds3/(display:table)

​

Answer 1

您当前尝试的问题是width: 100%;第三列div#c.这里100%将是其父级的100% - 其中包含所有三列.根据您希望的灵活程度,您可以选择一些选项.

如果站点宽度固定,请为第三列设置固定宽度.

如果要将第三列拉伸到其内容,请设置max-width.

如果您希望第三列拉伸以填充其父级,那么您可能最好使用(css)表.

查看http://somacss.com/cols.html以获取有关css列布局的优秀资源.