显示设置使图像占据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生成的控件，所以如果有一个CSS而不是手动编辑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

在不知道标记的外观的情况下，您需要在日期元素上使用clear: both;。

Clear会将清除的元素推到标记之前的任何浮点数下面。

Answer 2

在css。中添加一个日期值并将其清除值设置为

HTML：

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

CSS：

.date{
    clear: both;
}

P.S。：当您使用标题时已经设置了span的某些属性，您需要清除时间元素的属性或使用任何其他元素而不是span。