如何在设置绝对位置时保持宽度

Question

我有一个带有几个div的列表来设计它们的样式。我想沿着底边对齐其中一个div。如果我制作div position: absolute（父母li也是绝对的，所以它是相对的），那么它会丢失元素应该的宽度。如果我从div中删除position: absolute，那么div的宽度是正确的。 div的宽度没有明确设置，但应占用尽可能多的空间。

在下面的例子中，我有2项。与class="rules"的div是有问题的项目。在这红色的项目，该<p>足够宽，从而扩展div来全宽，它可以占用，但就是蓝色的项目有不<p>里面很多文本，以便在div不是很宽。我可以删除position: absolute，但是div不会与底部对齐。

我的问题是这样的：我可以以某种方式使宽度相同的所有项目没有明确声明的宽度，或者是有在列表项的底部定位的div一些其他的方式？我能想到的唯一的办法是

Here is a fiddle

和代码，以防万一：

HTML

<ul class="cardlist"> 
    <li class="blue"> 
    <h4>Think Twice<div class="cost">1U</div></h4> 
    <div class="type">Instant</div> 
    <div class="rules"> 
     <p>Draw a card.</p> 
     <p>Flashback {2}{U}</p> 
    </div> 
    </li> 
    <li class="red"> 
    <h4>Lightning Bolt<div class="cost">R</div></h4> 
    <div class="type">Instant</div> 
    <div class="rules"> 
     <p>Lightning Bolt deals 3 damage to target creature or player.</p> 
    </div> 
    </li> 
</ul> 

CSS

p, div, ul, li, body, h1, h2, h3, h4, h5, h6 
{ 
margin: 0px; 
padding: 0px; 
border: 0px solid #000000; 
} 

.blue { background-color: rgba(15, 158, 219, 0.9);} 
.red { background-color: rgba(227, 65, 16, 0.9); } 

#BodyContainer 
{ 
width: 100%; 
height: 100%; 
} 

#BodyContainer > div, ul, li 
{ 
display: inline-block; 
} 

ul 
{ 
text-align: left; 
list-style-type: none; 
} 

.cardlist li 
{ 
vertical-align: top; 
border: 10px solid #000000; 
border-radius: 15px; 
padding: 10px; 
width: 250px; 
height: 300px; 
margin-bottom: 5px; 
position: relative; 
box-shadow: 5px 5px 5px #CCCCCC; 
} 
.cardlist li h4 
{ 
padding: 3px; 
background-color: #FFFFFF; 
border: 2px solid #000000; 
border-radius: 5px; 
} 

.cardlist .cost 
{ 
float: right; 
margin-right: 4px; 
} 

.cardlist .type 
{ 
display: block; 
background-color: #FFFFFF; 
border: 2px solid #000000; 
border-radius: 5px; 
padding: 1px; 
} 

.cardlist li .rules 
{ 
display: inline-block; 
min-height: 100px; 
background-color: #FFFFFF; 
border: 2px solid #000000; 
padding: 4px; 
position: absolute; 
bottom: 7px; 
margin-right: 12px; 
margin-left: 2px; 
} 

.cardlist li .rules p 
{ 
width: 100%; 
} 

.cardlist li .pt 
{ 
float: right; 
position: absolute; 
bottom: 2px; 
right: 8px; 
padding: 3px 8px; 
background-color: #FFFFFF; 
border: 2px solid #000000; 
border-radius: 5px; 
} 

.cardlist li p 
{ 
margin-bottom: 5px; 
} 

Answer 1

.cardlist li .rules不有一个宽度。它将具有父级的最大宽度，其中width: auto。

你可以给它一个宽度：width: 100%（px：width: 123px）或者用left: 0; right: 0;来拉伸它。