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

我正在尝试在列中创建一些容器div，并且在其中有一段长度各不相同的段落。使用绝对定位元素将div扩展为文本长度

我想扩大div到正确的高度，以允许所有文本，但是因为我的元素设置为positioned: absolute，我认为这是一个问题。

请参阅我的小提琴：http://jsfiddle.net/p7pue2kx/1/

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

有没有更好的方法来做这个定位，可以让我的文本扩大容器。

在此先感谢。

来源

2016-05-03 Chris Barlow

另一种方式是做正常的方式......我的意思是，不使用定位，如果它没有必要 – markoffden

与其试图通过突出显示一个CSS规则来发布链接到jsFiddle而没有在代码中显示的警告，而不是尝试解决这个警告，那么你怎么发布一个[mcve ]在你的问题？ – j08691

正如您现在可能已经阅读的那样，除非确实需要，否则不要使用绝对定位。那么你为什么使用绝对定位？ – Pjetr

那里是没有必要使用它:)

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

来源

2016-05-03 14:33:37

非常感谢。我现在看到我要去哪里错了！ –

可能的情况下始终避免绝对定位，不要使用绝对定位。这是一个使用最少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

来源

2016-05-03 14:42:17 NotJustin

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

回答

相关问题