1

これは私のコードです

#sidebar
{
    width:140px;
    border: solid 3px green;
    height:300px;
    float:left;
}


#content
{
    border: solid 3px blue;
    height:400px;
    float:left;

}
<div id="sidebar">Sidebar</div>

<div id="content">Content</div>

コンテンツdivの幅が指定されていないため、予想どおり、div内のテキストを表示するのに十分なスペースしか占有しません。

フロートを使用する代わりに、次のようにマージンを使用します。

#content
{
    border: solid 3px blue;
    height:400px;
    margin-left:160px;

}

幅が指定されていなくても、コンテンツdivがブラウザビューポートの残りの幅を占めるようになります。

これは、contentdivがユーザーエージェントのスタイルシートによって割り当てられたbodyタグのwidth属性を継承しているためだと思います。これが本当なら、私の質問は、フロートを使用しているときに継承が発生しないのはなぜですか？

4

1 に答える 1

0

の未指定widthのdivデフォルトはwidth:100%;です。

必要なwidth:auto;効果を得るには、そのコンテンツを含めるのに十分な幅だけを指定する必要があります。

#content
{
    width  : auto;
    border : solid 3px blue;
    height : 400px;
    float  : left;
}
于 2013-02-09T02:42:09.730 に答える