Question

另一个CSS问题。

我在<li>标记内有<ul>标记内的div框。 div标签每个都包含一个图像，图像下方有文本。图像的大小都相同，但文本的长度不一样 - 所以div框的大小不一样。我希望图像的顶部对齐，但是现在它们看起来更像是楼梯。我尝试改变div的高度，但是向下延伸盒子而不是向上。这是我到目前为止的相应代码。

<ul>
        <li class="line2"><div style="width:284px;border:3px;border-style:solid;"><img class="border" src="/images/icons/1.png" width="284" height="164" alt=""/><p>Paragraph.</p></div></li>
        <li class="line2"><div style="width:284px;border:3px;border-style:solid;"><img class="border" src="/images/icons/2.png" width="284" height="164" alt=""/><p>Longer Paragraph</p></div></li>
        <li class="line2"><div style="width:284px;border:3px;border-style:solid;"><img class="border" src="/images/icons/3.png" width="284" height="164" alt=""/><p>Longest Paragraph</p></div></li>
        </ul>

（边界就是这样，我可以看到我正在使用的东西）

我意识到我可以将图像和文本分成不同的div，但是我已经有很多不同的div了，我觉得我有点过分了。如果这是最好的方式，我会，但我想知道肯定。

如果有人可以帮忙解决这个问题，我真的很感激。感谢。

Answer 1

<div>标记基本上会添加逻辑分区和换行符。这就是它显示为楼梯的原因。所以我建议，你应该尝试使用<span>标签，通过它你可以灵活地对齐你的盒子; 我希望这有帮助

Answer 2

除了最明显的事以外，我尝试了一切;我在文本下添加了<br/>个标签，用于低于最高标签的标签。我知道可能有更好的方法来做到这一点，但对我来说最简单的事情就是。

Div盒子高度

2 个答案: