文本有可伸縮的長度

而這裏的標記（CSS在撥弄）。

<div class="item"> 
    <a href="#"> 
     <span class="title">Short Title </span><br/> 
     <span class="date">June 21st, 2013</span> 
    </a> 
</div>okay, this is good 
<br/><br/> 
<div class="item"> 
    <a href="#"> 
     <span class="title">A title which is medium </span><br/> 
     <span class="date">June 21st, 2013</span> 
    </a> 
</div>still working... 
<br/><br/> 
<div class="item"> 
    <a href="#"> 
     <span class="title">A much longer title than normal to accommodate </span><br/> 
     <span class="date">June 21st, 2013</span> 
    </a> 
</div>yikes, it's being pushed down 
<br/><br/> 
<div class="item-ideal"> 
    <a href="#"> 
     <span class="title">A much longer title than normal to accommodate </span><br/> 
     <span class="date">June 21st, 2013</span> 
    </a> 
</div>how I want it to look in this case

瀏覽的所有4 ..第四div有一個獨特的類理想的硬編碼尺寸。

是否有任何創造性的解決方案使這項工作？ 我希望塊的標籤保持相同的大小。

來源

2013-06-21 Mr. Loop

從您的a CSS規則中刪除height屬性。

a { 
    display: block; 
    width: 200px; 
    /* height: 70px; */ 
    padding: 20px; 
    background: black; 
    box-shadow: 0px 0px 15px 0px black; 
    text-align: center; 
    text-decoration:none; 
}

http://jsfiddle.net/AsanM/1/

來源

2013-06-21 13:34:46 Joe

謝謝，但我希望他們都是相同的高度。 –

使用最小高度，而不是高度

a{min-height:70px;}

來源

2013-06-21 13:35:34

快速修復。感謝分享。 –

不幸的是，在這個問題中我沒有提到我希望所有的項目都是相同的大小，所以這是行不通的。 –

所以增加塊的高度 –

貌似要在div垂直居中。

這裏是你如何做到這一點：

在CSS：

#floater {float:left; height:50%; margin-bottom:-55px;} 
#content {clear:both; height:110px; position:relative;}

在HTML：

<div id="floater"> 
<div id="content"> 
    Content here 
</div> 
</div>

來源

2013-06-21 13:39:29

更改您的a的height要麼min-height或auto。

將a內部的span與另一個跨度相關聯。

將display:table;添加到新的跨度。

將display:table-cell和vertical-align:center;添加到現有的a。

工作時，當我在你的小提琴上嘗試它，希望我有更多的時間，希望它有幫助。 =）

來源

2013-06-21 13:59:47 Dom

如果要保留所需的大小並根據長度更改文本的大小，請參閱here這個問題。

來源

2013-06-21 23:16:00 rkpasia

文本有可伸縮的長度

回答

相關問題