1

別の呼ばれる小さなボックスを含む、<div>呼び出された大きなボックスがあります。<div>各小さなボックスには、個別のボックス内にラップされた画像とテキストが含まれており<div>、状況を説明する図もあります。

http://s21.postimg.org/4thwzlt9j/Untitled.jpg

問題は、テキストがそれを囲む div よりも大きい場合です。別の小箱を作成すると、上の小箱と重なってしまいます。

<div>CSS を変更して、テキストなどの要素が小さなボックスに重ならないようにするにはどうすればよいですか。

http://s18.postimg.org/kqkqlp6w9/Untitled.png

マージンは固定なので使いたくない。1 つの小さなボックスにテキストが 3 語しかなく、下部に大きな余白がある場合はどうなりますか?

どうすれば動的に作成できるので、テキストが少しオーバーした場合、2 番目の小さなボックスは重ならず、代わりにサイズを調整して下部にスペースができるようにしますか?

  .bigbox {height: 700px;  
  width: 950px; 
  background:#FFFFFF;
  border-style:solid;
  border-color:#D5DADA;
  border-width:1px;}

 .smallbox {text-align:center;
  height:300px;
  width:250px;
  background: #FFB236;
  position:relative;
  left:0px;top:0px;
  margin-bottom: px;}

 .imagebox img{margin:6px 6px;
  padding-top:10px;
  padding-bottom:10px;
  padding-right:10px;
  padding-left:10px;}

私のHTML

<div class="bigbox">
<div class="smallbox"><div class="i"><img border="0"src="im.jpg" alt="">  </div>This is the text and it is wrapped inside a div.  </div>
<div class="smallbox"><div class="imagebox"><img border="0"src="im.jpg" alt="">  </div>This is the text and it is wrapped inside a div.</div>
4

1 に答える 1

2

heightの属性を削除するだけで.smallboxうまくいきました。div固定の高さを指定する際の問題は、すべてのコンテンツが収まるように を拡張できないことです。

divが保持できる以上のコンテンツがある場合、オーバーフローします。オーバーフローは、指定方法に応じて表示または非表示にすることができますが、レイアウトは変更されず、コンテンツとしても機能しません。

http://jsfiddle.net/wtBUd/

于 2013-04-08T04:27:28.283 に答える