如何在設置絕對位置時保持寬度

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;來拉伸它。