我正在尝试在列中创建一些容器div,并且其中有一个不同长度的段落。
我想将div扩展到正确的高度以允许所有文本,但是当我的元素设置为时positioned: absolute
,我认为这会引起问题。
请看我小提琴:http : //jsfiddle.net/p7pue2kx/1/
在第一个框中,文本非常合适。但是,当文本长得多时,它将溢出,并且div容器不会相应地扩展。我想确保有一个最小高度,但最大由文本大小决定。
是否有任何更好的方法可以使我的文字扩展容器。
提前致谢。
不要在不需要使用绝对定位的地方使用它:)
* {
-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] 删除。
我来说两句