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

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

1 个答案: