Question

我有一个名为大框的<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>

Answer 1

只需删除height为我工作的.smallbox属性。指定固定高度的问题在于它根本不允许div扩展以使所有内容适合内部。

如果内容多于div可容纳的内容，则溢出。根据您的指定方式，溢出可以是可见的或隐藏的，但不会更改布局，而不会充当内容。

http://jsfiddle.net/wtBUd/

CSS重叠错误

1 个答案: