0

画像のような設定のページを作ろうとしています。A & B は動的な高さで、幅は静的です。C は、高さ 500px、幅 500px の静的サイズです。

各AとBのコンテンツの高さが、たとえば500pxの高さを超えないようにするにはどうすればよいですか

http://i47.tinypic.com/zvyd7d.png

4

1 に答える 1

0

これを a と b の CSS に追加します。

max-height:500px;.

フロート (存在する場合) を正しくエスケープしている限り、そこで切断されます。

追加する必要があるかもしれません

overflow:hidden;

a または b のコンテンツが 500px に及ぶ場合、ページに表示されなくなります。

質問を理解している完成したコードは

CSS

#wrap { width: 700px; height:500px; } /* this combines both static widths and height stays dynamic */
.a, .b { float:left; background-color:#F03; width: 200px; height:50%; min-height:100px; max-height: 500px; }
.c { background-color:#990; width: 500px; height: 500px; float: right; }

HTML

<div id="wrap">
  <div class="c">C</div>
  <div class="a">A</div>
  <div class="b">B</div>
<div style="clear:both;">
</div>

C が上にあることに注意してください。これは、コンテナーの右側にフロートし、残りは C が満たされていないスペースを見つけようとするためです。視覚的な補助のための背景色。

http://jsfiddle.net/QW5MQ/ <-- これらはあなたの友達です。

于 2013-03-01T18:53:24.057 に答える