13

我不能在一行中显示几个 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;
}​

现场演示：

​</p>

4

5 回答 5

11

您当前尝试的问题是width: 100%;在第三列div#c。这里的 100% 将是其父级的 100% - 它包含所有三列。根据您想要的灵活性级别，您有几个选择。

如果站点宽度是固定的，则为第三列设置固定宽度。

如果您希望第三列拉伸到其内容，请设置 max-width。

如果您希望第三列拉伸以填充其父列，则最好使用 (css) 表。

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

于 2012-08-02T12:14:03.603 回答
3

问题出在第三列。您不能将宽度设置为 100%。此外，您需要float: left;. 这是固定代码：

<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>
    <div style="clear:both;"></div>
    500px
</div>

和 CSS：

DIV {
    margin:5px;
    font-size:10px;
}

DIV#all {
    width:500px;
    border:1px dotted black;
}

DIV#a {
    float: left;
    width:25px;
    height:200px;
    border:1px solid red;
    color:red;
}

DIV#b {
    float: left;
    width:200px;    
    height:200px;
    border:1px solid green;
    color:green;
}

DIV#c {
    float: left;
    width:210px; 
    min-height:190px;
    border:1px solid blue;
    color:blue;
    padding: 5px;
}

DIV#c1 {
    width:100%;
    border:1px dotted blue;
    color:blue;
    margin: 0 0 5px 0;   
}

DIV#c2 {
    width:100%;
    border:1px dotted blue;
    margin: 0 0 5px 0;   
}

DIV#c3 {
    width:100%;
    border:1px dotted blue;   
    color:blue;
    margin: 0 0 5px 0;
}​

还有现场演示

于 2012-08-02T12:23:00.930 回答
1

如果您的站点宽度是固定的，则只需替换100%为容器中所有剩余的宽度。
示例：jsFiddle

如果您希望它是动态的并适合任何宽度的屏幕，我认为纯 CSS 是不可能的。我用jQuery做到了：

var containerWidth = $('#all').outerWidth();
var widthLeft = $('#a').outerWidth(true) + $('#b').outerWidth(true);
var widthRight = containerWidth - widthLeft - 20; // 20px = spacing between elements

$('#c').css('width', widthRight+ 'px');
$('#c1, #c2, #c3').css('width', widthRight-10+ 'px'); // 10 = padding on the right side

修改后的 CSS：

DIV#c {
    display:inline-block;
    height:200px;
    border:1px solid blue;
    color:blue;
    float: right;
}

DIV#c1 {
    border:1px dotted blue;
    color:blue;   
}

DIV#c2 {
    border:1px dotted blue;    
}

DIV#c3 {
    border:1px dotted blue;   
    color:blue;
}

删除width: 100%并设置float:right为#c.

现场演示：jsFiddle

于 2012-08-02T12:21:00.587 回答
1

看看这个更新。我希望足够好:)

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;
    float:left;
}

DIV#b {
    display:inline-block;
    width:150px;    
    height:200px;
    border:1px solid green;
    color:green;
    float:left;
}

DIV#c {
    display:inline-block;
    width:277px; 
    height:200px;
    border:1px solid blue;
    padding:0 7px 0 5px;
    color:blue;
    float:left;
}

DIV#c1 {
    width:100%;
    margin:5px 0;
    border:1px dotted blue;
    color:blue; 
}

DIV#c2 {
    width:100%;
    margin:5px 0;
    border:1px dotted blue;    
}

DIV#c3 {
    width:100%;
    margin:5px 0;
    border:1px dotted blue;   
    color:blue;
}
于 2012-08-02T12:21:21.130 回答
-4 
div { float:left; width:10px; height:10px; }

有帮助吗？

于 2012-08-02T12:10:41.510 回答