html - 使用绝对定位元素将 div 扩展为文本长度

Question

我正在尝试在一列中创建一些容器 div，其中有一个长度不一的段落。

我想将 div 扩展到正确的高度以允许所有文本，但是由于我的元素设置为 positioned: absolute，我认为这会导致问题。

请看我的 fiddle :http://jsfiddle.net/p7pue2kx/1/

在第一个框中，文本非常合适。然而，当文本更长时，它会溢出并且 div 容器不会相应地扩展。我想确保有一个最小高度，但最大高度由文本大小决定。

是否有更好的定位方法可以让我的文本扩展容器。

提前致谢。

Answer 1

不要在不需要的地方使用绝对定位:)

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.masterContainer {
  height: 800px;
  background: blue;
  width: 300px;
}
.container {
  position: relative;
  width: 100%;
  background: yellow;
  min-height: 60px;
  margin: 10px 0px;
  padding: 10px;
}
.summary {
  clear: both;
  width: 100%;
  overflow: hidden;
  background: lightblue;
}
.id {
  float: left;
  background: green;
}
.xyz {
  float: right;
  background: red;
}

<div class="masterContainer">
  <div class="container">
    <div class="id">
      KEY / ID
    </div>
    <div class="xyz">ABCD EFGH</div>
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>

  <div class="container">
    <div class="id">
      KEY / ID
    </div>
    <div class="xyz">ABCD EFGH</div>
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>

  <div class="container">
    <div class="id">
      KEY / ID
    </div>
    <div class="xyz">ABCD EFGH</div>
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>

</div>