css - CSS レイアウトは、テキストを下ではなくすぐ横に配置します

Question

以下に示す CSS レイアウトに問題があります。

#wrapper { 
 width: 80%;
} 

#content { 
 float: left;
 background: #FFFF00;
 height: 350px;
 width: 70%;
 display: inline;
}

#rightcolumn { 
 background: #EBE3CD;
 height: 350px;
 width: 30%;
 height: 250px;
 float: left;
}

#legendcolumn {
 background: #FF00FF;
 height: 100px;
 width: 30%;
 float: left;
}

私のHTMLの本文は次のとおりです。

 <div id="wrapper">
  <div id="content">
   Main Content.
  </div>
  <div id="rightcolumn">
   Right Column.
  </div>
  <div id="legendcolumn">
   Here comes the legend.
  </div>
 </div>

 Lorem ipsum dolor sit amet.

残念ながら、テキストlorem ipsum dolor sit ametがレイアウトの横に配置されています。ただし、レイアウトのすぐ下にテキストを配置したいと思います。新しいdivコンテナを導入せずにこれを達成するにはどうすればよいですか?

Answer 1

float と inline のコンテンツが問題を引き起こしていますが、The Power of Overflowでそれを制御できます:

#wrapper 
{  
  width: 80%; 
  overflow: auto;  // overflow + float = magic happy land
}  

border: 1px solid red;編集: toを追加すると、display:block と clear:both が機能しない理由がわかります#wrapper。float の結果の 1 つは、コンテナーが非フローティングの子 (ここではゼロ) の高さまで折りたたまれることです。Block と Clear は、それらが参照する要素の高さがゼロの場合、明らかな影響はありません (ブロックはとにかくあります - div はネイティブにブロックされます)。オーバーフローオートはこれを克服します。

Answer 2

#wrapper は幅が 80% しか設定されていないため、これらのテキスト要素は画面の残りの 20% を埋めようとします。新しい div なしでは正確な解決策はありませんが、次の回避策があると思います。

#wrapper {
    width: 100%;
    padding-right: 20%:
}

Answer 3

次のように CSS を更新します。

#wrapper { 
 width: 80%;
 display: block;
} 

Answer 4

なぜあなたは#wrapper幅を80％にしていますか？代わりに 100% にします。