フレーム type_html/css_WEB-ITnose ではなく、列、div+css について教えてください。

div と css を使用してコンテンツの 3 つの部分を配布する方法。 。 。 。私の div がなぜ上下にしか配置されていないのか、さまざまな神様に説明していただきたいと願っています。 。 。 。

ディスカッションに返信 (解決策)

マスターに助けを求める、自己ウォーミング投稿

div はブロックレベルの要素であり、ブロック要素にレイアウト属性がない場合、デフォルトの配置は行の折り返しです。左右に配置したい場合は、float を追加する必要があります

div はブロックレベルの要素であり、ブロック要素にレイアウト属性がない場合、デフォルトの配置は行の折り返しです。左右に並べたい場合はfloat

floatを追加する必要がありますか？しかし、追加した後もまだ存在するのはなぜでしょうか? 。 。 。 。そうですね、わかります、一方は 20%、もう一方は 80%、いや、もう一方は 80% を望んでいます。 。 。 。はは、本当にありがとう

<div><div  style="width:100px;float:left;" ></div> <div style="width:290px%;float:right"></div></div>

<div><div  style="width:100px;float:left;" ></div> <div style="width:290px%;float:right"></div></div>

ついさっきのことですが、解決しました、お二人ともありがとうございました、帰ります

<style>*{    margin:0;    padding:0;    box-sizing: border-box;    border: 0px solid red;}#main {    margin: 10px;}#bd {    margin-top: 10px;}#content{    margin-left: 10px;}#main{    display: inline-block;}#header{    height: 80px;    background: #ffbbbb;}#bd{    height: 500px;}#sidebar, #content{    height: 100%;    display: inline-block;    float: left;}#sidebar{    width: 200px;    background: lightgreen;}#content{    width: 600px;    left: 200px;    background: lightblue;}</style><div id=main><div id=header>header</div><div id=bd><div id=sidebar>sidebar</div><div id=content>content</div></div></div>

6階に問題を投稿しました。ウィンドウの幅が十分に小さいと、レイアウトが破壊され、コンテンツの位置が折り返されます

投稿者は投稿を閉じていますが、私はまだ投稿します:

ヘッダーの高さは固定されており、サイドバーの高さは固定されています。幅、残りはウィンドウ サイズの変更に適応できます。