DIV定位，内容总是溢出

Question

有利润底部

#txtmiddle {
  min-height: 80px;
  border: 1px solid #e0e0e0;
  background-color: rgba(234, 234, 234, 0.7);
  margin-top: 5px;
  opacity: 0.7;
  filter: alpha(opacity=70);
  padding-top: 2%;
  padding-right: 2%;
  padding-bottom: 4%;
  padding-left: 2%;
  border-radius: 15px;
  position: relative;
}
#midcontentimgright {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  border-radius: 50px;
  max-width: 25%;
  max-height: 100px;
  position: relative;
}

<div id="middlewrapper">
  <div id="txtmiddle" class="content6">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</div>
  <div id="txtmiddle" class="content7">Lorem ipsum <a id="mapa" href="map.htm">KARTE</a>
    <img src="/MapAusschnitt.png" id="midcontentimgright" class="4">
  </div>
  <div id="txtmiddle" class="content7">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod WERDEN SIE</div>
</div>

我真的很难理解定位......我只是不想要任何溢出，一切都应该在div元素里面......

Answer 1

这里有几件事可以帮到你。

如果没有JSfiddle和原始图片，我无法告诉您需要更改多少保证金，但看起来img标记的margin-top太大了。否则，如果您要在div中的图片顶部查找该空格，则应更改height的CSS的#txtmiddle。通过明确定义CSS中元素的height，您可以避免img标记未包含在div中的情况。

其次，在你的代码片段中你有3个div id="txtmiddle"，也许这应该是一个类，而ID标签通常应该引用DOM中的一个唯一对象，而不是多个。此更改将反映在CSS中，方法是将规则定义从#txtmiddle更改为.txtmiddle，同样删除div标记上的id属性并将其放在{{1}之后} class。

将content*标记包装在另一个div中并将该div设置为特定高度也可能会有所帮助。

希望能给你一些东西。

VielGlück！