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

克里斯·巴洛

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

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

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

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

是否有任何更好的方法可以使我的文字扩展容器。

提前致谢。

博扬·佩特科夫斯基(Bojan Petkovski)

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

防止绝对定位的div来块div的悬停样式的元素?

使绝对定位的div扩展父div的高度

我可以使用CSS过渡为绝对定位的元素设置动画吗?

在绝对定位的div中将文本垂直居中

将div定位到另一个div的底部,而不使用绝对值

将绝对定位的元素宽度设置为其内容(仅是文本)

使用绝对定位破坏文本

绝对定位div中的中心元素

使用flexbox父级在绝对定位的div中垂直居中,右对齐,多行文本

如何在div中绝对定位的元素中居中变长文本?

绝对定位元素扩展父元素

当使用jQuery为其父元素设置动画时,为什么绝对子元素定位元素会中断?

使用绝对定位的内容时强制Bootstrap div垂直扩展

如何将绝对定位的元素居中?

将显示为表格并绝对定位的div居中

在没有绝对定位的情况下将div的位置设置为低于其他位置?

将绝对定位的div垂直居中?

将锚文本放置在其绝对定位的伪元素上方

使用CSS定位div:使用绝对定位div的布局问题

在定位元素时使用边距还是绝对定位?

如何使用CSS下推绝对定位的div

将绝对定位的DIV“完全”适合相对定位的父DIV?

溢出隐藏的div之外的绝对定位的元素

将 DIV 与绝对定位的孩子水平对齐

将文本放在绝对定位 div 的中心

使绝对定位元素向左扩展

防止文本在绝对定位的 div 中换行

如何将文本背景调整为具有绝对位置的单词长度

如何将绝对定位元素宽度设置为父节点宽度?