セクションが内容より小さい

私がMVCの剃刀で得るデフォルトのレイアウトページは、その内容よりも小さいセクションタグに問題があります。問題は、その中に大きなテーブルがあり、それに合うだけの幅になっているセクションではなく、セクションから外れていることです。 jsFiddleで問題を再現しました。青い箱が赤い箱よりはるかに薄いことが分かります。青色のセクションはウィンドウの初期サイズですが、右にスクロールすると、セクションがセクションよりも広いことがわかります。セクションが内容より小さい

セクションをコンテンツのサイズに合わせて拡大するにはどうすればよいですか？

<div class="page">   
    <section id="main" style="background:blue;height:50px"> 
     <table style="width:1000px; overflow:auto;background:red"> 
      <tr><td>lkjlkjlkjlkjjhgjhgjhgjgjhgjhg</td></tr> 

     </table> 
    </section> 
    <footer> 
    </footer> 
</div>

http://jsfiddle.net/sDG8n/1/

出典

2012-03-05 AaronLS

セクションではなく、テーブルの上にoverflow:autoを入れてみてください。

出典

2012-03-05 18:19:28 Travesty3

Specあなたは間違ってそれをやっていると言う：

セクションの要素は、一般的な文書またはアプリケーションセクションを表し... section要素は、一般的なコンテナ要素ではありません。 DIVを使用してください：要素はスタイリング目的またはスクリプティングの利便性として必要な場合は、著者は、言い換えれば、div要素の代わりに

を使用することをお勧めします。

出典

2012-03-05 18:20:22

には、「あなたは間違ってそれをやっている」あなたは間違ってそれを読んでいます。私は明らかにこれは私が作ったデザインの決定ではないが、MVCプロジェクトではデフォルトで提供される。私はフック/コンベンションがそこにあるかどうかを理解することなく、これを変更することに消極的です。 – AaronLS

フロート左

<section id="main" style="float:left;background:blue;height:50px">

出典

2012-03-05 18:26:22

セクションが内容より小さい

答えて

関連する問題