如何添加一個DIV內兩行文字

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> 

顯示此：

我該如何修改CSS，使兩行看起來像URGENT CARE的top and right below是今日日期？

Answer 1

你會需要一些jQuery的for即

演示

http://jsfiddle.net/zp0q1yrx/

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

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

簡單：

1. 變化line-height到15px
2. 添加<br/>兩個文本部分在兩者之間。

Answer 3

如果您想對的另一個上面一個您可能希望這樣：

<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>

Answer 4

你已經做的工作​​，但您需要更改行高度爲15PX第三格的代碼。順便說一句，你就錯過了第一個元素的結束</div>標籤......這就是你問什麼...

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

但是...

想必你會希望能夠重用此代碼動態爲其他部門（兒科，放射科等）。有些名字可能會比其他名字更長，其中&必須包裝，打破硬編碼的30像素高度限制和居中。另外，你也可以將它們剪掉。text-overflow:ellipses

另外，大概你最終會希望顯示實際的日期動態（從服務器或從瀏覽器），因爲其他人已經建議。它是否適合於給定的寬度？你想只包含日期或標籤嗎？ "Today's Date: 1/1/2015"？

爲了解決這些問題，每行文本應該包裝在一個具有唯一ID或類的元素中，以便在代碼中進行訪問。可能是<div>或<span>顯示爲塊。

你已經似乎很好地工作，只是改變線的高度，但高度是固定的。下面我已經包裝了文字&將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> 

您也可能會考慮部門名稱&日期稍有不同的大小&顏色，來區分它們。而不是讓他們集中在混亂的情況下，以便部門名稱必須包裝，將它們左對齊，但將它們集中在父div中。使用邊距將它們彼此分開&父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; 
}