html - 显示设置使图像占据整行 div

Question

我有一些看起来像的 CSS

.drugCard
{
    width:280px;
    height:375px;
    border: 10px solid;
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    text-align:center;
    float:left;
}
.drugCard span
{
    display:block;
    border-bottom:2px solid #ccc;
    font-size:xx-large;

}
.drugCard img
{
    padding:2px 2px 2px 2px;
    border: 1px solid black;
    clear:both;
    display:inline-block;
}

输出看起来像

您可以在右图中看到三张图片，日期显示在图片底部。这是因为那三张图片完全填满了 div。我需要什么 CSS 才能使日期始终显示在新行上？

这些是 .NET 生成的控件，因此与手动编辑 HTML 相比，如果有的话，我更喜欢单行 CSS。目前，您看到的日期是作为文字文本添加到页面中的。 编辑添加标记:

<div class="drugCard" style="border-color:Chocolate;">
    <span>BISCOLAX</span><img src="Images/Nausea.jpg" style="height:75px;width:75px;" />11/19/2012 12:00:00 AM
</div><div class="drugCard" style="border-color:DarkOrange;">
    <span>RENAGEL</span><img src="Images/Pain.jpg" style="height:75px;width:75px;" /><img src="Images/Sleepiness.jpg" style="height:75px;width:75px;" /><img src="Images/UpsetStomach.jpg" style="height:75px;width:75px;" />11/9/2012 12:00:00 AM
</div><div class="drugCard" style="border-color:MediumAquamarine;">
    <span>VYVANSE</span><img src="Images/Sleepiness.jpg" style="height:75px;width:75px;" /><img src="Images/Fever.jpg" style="height:75px;width:75px;" /><img src="Images/Nausea.jpg" style="height:75px;width:75px;" />1/29/2013 12:00:00 AM
</div>

Answer 1

在您的日期值周围放置一个并在 css 中将其明确的值设置为两者。

HTML:

   <span class="date">11/9/2012 12:00:00 AM</span>

CSS:

.date{
    clear: both;
}

P.S.:当您将它用于标题时，您已经设置了 span 的一些属性，您需要为您的时间元素清除这些属性，或者使用任何其他元素而不是 span。