Question

我正在尝试在列中创建一些容器div，并且其中包含不同长度的段落。

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

请看我小提琴：http://jsfiddle.net/p7pue2kx/1/

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

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

提前致谢。

Answer 1

在不需要使用它的情况下不要使用绝对定位：）

＆＃13;

* {
  -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;
}

＆＃13;

<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>

＆＃13;

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扩展为文本长度

2 个答案: