7

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

在下面的示例中，我有 2 个项目。divclass="rules"是有问题的项目。在红色的项目中，<p>宽度足以将 div 扩展到它可以占据的全宽，但在蓝色项目上，内部没有太多文本，<p>因此 div 不是很宽。我可以删除，position: absolute但是 div 没有与底部对齐。

我的问题是：我可以在不明确声明宽度的情况下以某种方式使所有项目的宽度相同，还是有其他方法可以将 div 定位在列表项的底部？我能想到的唯一解决方案是

这是一个小提琴

还有代码，以防万一：

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;
}
4

1 回答 1

8

.cardlist li .rules没有宽度。它将具有父级的最大宽度，带有width: auto.

你可以给它一个宽度：width: 100%(px: width: 123px) 或用left: 0; right: 0;.

于 2013-10-23T22:45:19.740 回答