html - 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 中寻找图像顶部的空间，您应该更改 #txtmiddle 的 CSS 的 height。通过在 CSS 中显式定义元素的 height，您可以避免 img 标签未包含在 div 中的情况。

其次，在您的代码段中，您有 3 个 div，其中 id="txtmiddle"，也许这应该是一个类，因为 ID 标签通常应该引用 DOM 中的一个唯一对象，而不是多个。通过将规则定义从 #txtmiddle 更改为 .txtmiddle 并同样删除 id 属性，此更改将反射(reflect)在 CSS 中div 标签并将它们放在 content* 类之后。

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

希望这能给你一些东西。

维尔·格吕克!