13

いくつかの DIV を 1 行に表示できません。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%;、3 番目の列にありますdiv#c。ここでの 100% は、3 つの列すべてを含む親の 100% になります。必要な柔軟性のレベルに応じて、いくつかのオプションがあります。

サイトの幅が固定の場合は、3 列目に固定幅を設定します。

3 番目の列をその内容に合わせて拡大する場合は、max-width を設定します。

3 番目の列をその親を埋めるために引き延ばしたい場合は、おそらく (css) テーブルを使用する方がよいでしょう。

CSS カラム レイアウトに関する優れたリソースについては、http://somacss.com/cols.htmlをご覧ください。

于 2012-08-02T12:14:03.603 に答える
3

問題は 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 に答える