1

我有一些看起来像的 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>
4

2 回答 2

0

在不知道你的标记是什么样子的情况下，你需要使用clear:both; 在您的日期元素上。

Clear 会将已清除的元素推到标记中它之前的任何浮动下方。

于 2013-08-09T14:36:13.487 回答
0

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

HTML：

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

CSS：

.date{
    clear: both;
}

PS：由于您在将跨度用于标题时已经设置了一些属性，因此您需要为时间元素清除这些属性或使用任何其他元素代替跨度。

于 2013-08-09T14:46:14.877 回答