Question

我有以下代码（CSS是内联的，但一旦完成测试，它将被移动到指定的文件）：

<div style="width: 100%; overflow: hidden;">
<div style="float: left; width: 15%; height: 30px; line-height: 30px; vertical-align: middle; background: #FF00FF; padding: 0; margin: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px; color: #FFFFFF; font-family: Verdana; font-size: 9px; overflow: hidden; text-align: center;">
    <div style="text-align: center; width: 90%; padding: 0 0 0 10%; margin: 0; height: 30px; overflow: hidden;">
        URGENT CARE
        TODAYS DATE <!-- NEXT LINE CENTERED UNDERNEATH "URGENT CARE" -->
    </div>
</div>

显示：

enter image description here

如何修改CSS以使两条线显示为右下方的紧急护理是今天的日期？

Answer 1

你需要一些Jquery for That

<强>演示

http://jsfiddle.net/zp0q1yrx/

enter image description here

<强> Jquery的

var currtime = new Date();
var currdate = new Date();

currdate = (currdate.getMonth()+ 1) + '/' + currdate.getDate() + '/' + currdate.getFullYear(); 

currtime = (currtime.getHours() + ":"+ currtime.getMinutes());

$("#message").html("");
$("#message").html( "URGENT CARE<br />" + currdate + " " + currtime);

Answer 2

您已完成此任务的代码，但您需要将第3个div的行高更改为15px。顺便说一句，你错过了第一个元素的结束</div>标签......这就是你所问的......

<div style="... "> 
    <div style="...">
        <div style="...line-height: 15px">
          URGENT CARE
          TODAY'S DATE
        </div>
    </div>
</div>

但是...

据推测，您希望能够为其他部门（儿科，放射学等）动态重用此代码。有些名字可能比其他名字更长。必须包装，打破你的硬编码30px高度限制和居中。或者，您可以将其与text-overflow:ellipses

一起剪掉

另外，大概你最终会想要像其他人已经建议的那样动态地（从服务器或浏览器）显示实际日期。它是否适合给定的宽度？您想先包含日期或标签吗？ "Today's Date: 1/1/2015"？

要解决这些问题，每行文本都应包含在具有唯一ID或类的元素中，以便可以在代码中访问。可以是<div>或<span>显示为块。

你已经看起来只是改变了行高，但高度是固定的。下面我已经包装了文字＆amp;在适当的情况下将div更改为height:auto;。

http://jsfiddle.net/ajaaf41g/3/

<div style="width: 100%; overflow: hidden; "> 
    <div style="float: left; width: 15%; height: auto; line-height: 30px; vertical-align: middle; background: #FF00FF; padding: 0; margin: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px; font-family: Verdana; font-size: 9px; overflow: hidden; text-align: center;">
        <div style="text-align: center; width: 90%; padding: 0 0 0 10%; margin: 0 auto; overflow: hidden; line-height: 15px; background-color:#ff00ff">
          <span id="dept_name" class="pretty_span">REALLY LONG MEDICAL DEPARTMENT NAME</span>
          <span id="todays_date" class="pretty_span">TODAYS DATE</span> <!-- NEXT LINE CENTERED UNDERNEATH "URGENT CARE" -->
        </div>
    </div>
</div>

你也可以考虑制作dept name＆amp;日期略有不同＆amp;颜色，以区分它们。如果dept名称必须包装，而不是将它们置于混乱中，而是将它们彼此左对齐，而是将它们放在父div中。使用边距将它们彼此分开＆amp;父div的边缘。您可以保留font-size的固定像素值，或使用em进行动态调整大小。

CSS：

.pretty_span{
    display: block;
    text-align: left;
}

#dept_name{
    margin: 0.6em 0 0.6em 0;
    color: #FFFFFF;
    font-size: 1.1em;
}

#todays_date{
    font-size: 0.9em;
    color: #ccc;
    margin-bottom: 0.6em;
}

Answer 3

演示： http://jsfiddle.net/o1xubLq8/

简单地：

将line-height更改为15px
在两个文本部分之间添加<br/>。

Answer 4

如果你想要一个在另一个之上你可能想要这个：

＆＃13;

<div style="width: 100%; overflow: hidden;">
<div style="float: left; width: 15%; height: 60px; line-height: 30px; vertical-align: middle; background: #FF00FF; padding: 0; margin: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px; color: #FFFFFF; font-family: Verdana; font-size: 9px; overflow: hidden; text-align: center;">
    <div style="text-align: center; width: 90%; padding: 0 0 0 10%; margin: 0; height: 60px; overflow: hidden;">
        URGENT CARE
        TODAYS DATE <!-- NEXT LINE CENTERED UNDERNEATH "URGENT CARE" -->
    </div>
</div>

＆＃13;

如何在DIV中添加两行文本

4 个答案: