html - メイン コンテナに移動するフローティング サイドバーのコンテンツ

Question

私はこのhtmlを持っているとしましょう:

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

そしてこのCSS：

#sidebar {
 float:left;
 width:15%;    
 border:1px solid red;
}
#content {
 float:left;
    width:75%;
    border:1px solid green;
}

ご覧のとおり、サイドバーのコンテンツはコンテンツ コンテナの下に配置されています。行を壊してサイドバーに続くようにするにはどうすればよいですか?

な

Answer 1

テキストがコンテナの幅よりも広く、隣接する div にはみ出しています。

例: TestTestTestTestTest > 15% 幅

たとえば、サイドバーの div 内のコンテンツを単に Test に変更すると、テキストが隣接する div に重なるのを止めることができます。

div のオーバーフローを非表示に変更して、ボックス内に収まらないテキストがオーバーフローするのではなく表示されないようにします。