使用绝对定位元素将 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>

Answer 2

尽可能避免绝对定位。这是一种用最少的 CSS 来完成您想要的解决方案。

CSS:

.masterContainer {
    height: 800px;
    background: blue;
    width: 300px;
}
.container {
    width: 300px;
    background: yellow;
    margin: 10px 0px;
}
.summary {
    background: lightblue;
    display: block;
}
.id {
  background: green;
}
.xyz {
  background: red;
  float: right;
}

HTML:

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

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

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

</div>

Fiddle

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

Expand div to text length with absolute positioned elements

html

css

css-position

positioning