CSS DIV 行内块 + 宽度 100%

DIV inline-block + width 100%

提问by clavish

I can't display a few DIV's in one line. display: inline-blockand float: leftdoesn't work. My site width is not fixedso I want it to be dynamic to fit any width of screen.

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

---

---

HTML:

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:

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

Live Demos:

现场演示：

• PROBLEM:http://jsfiddle.net/BC2d9/

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

• 问题：http : //jsfiddle.net/BC2d9/

• 已解决：http : //jsfiddle.net/RAds3/( display:table)

?

?

采纳答案by xec

The problem with your current attempt is the width: 100%;on the third column div#c. 100% here will be 100% of its parent - which contains all three columns. Depending on what level of flexibility you want you have a few options.

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

If the site width is fixed, set a fixed width for the third column.

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

If you want the third column to stretch to its content, set max-width.

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

If you want the third column to stretch to fill its parent, you're probably better off with (css) tables.

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

Check out http://somacss.com/cols.htmlfor a great resource on css column layout.

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

回答by Miljan Puzovi?

Problem is with third column. You can't set width to 100%. Also, you need float: left;. Here is fixed code:

问题出在第三列。您不能将宽度设置为 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>

and CSS:

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

And also LIVE DEMO

还有现场演示

回答by Nikola K.

If your site width is fixed, then just replace 100%with all remained width in the container.
Example: jsFiddle

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

---

---

If you want it to be dynamic and to fit any width of screen, I think it's not possible with pure CSS. I made it with jQuery:

如果您希望它是动态的并适合任何宽度的屏幕，我认为纯 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

Modified CSS:

修改后的 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;
}

Removed width: 100%and set float:rightto #c.

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

Live demo: jsFiddle

现场演示：jsFiddle

回答by Mihai Matei

Check out this update. I hope is good enough :)

查看此更新。我希望足够好:)

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

回答by williamtell

div { float:left; width:10px; height:10px; }

Helps?

有帮助吗？