1

我有一个<div>叫大盒子，里面有另一个<div>叫小盒子。每个小盒子都包含一个单独的图像和文本，<div>我还有一个图表来解释我的情况。

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

问题是当文本大于包裹它的 div 时。如果我创建另一个小盒子，它将与上面的小盒子重叠。

如何修改 CSS，以便文本等元素越过<div>小框不会重叠。

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

我不想使用保证金，因为它是固定的。如果一个小盒子只有 3 个文字，底部有很大的空白怎么办？

我怎样才能动态地制作它，所以如果文本有点过了，第二个小框不会重叠它，而是会调整它的大小，让它在底部有空间？

  .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 回答