html - 固定块元素内的文本具有可伸缩的长度

Question

这是我的jsfiddle

这是标记（小提琴中的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 个 .. 第 4 个 div 有一个独特的类，它硬编码理想尺寸。

是否有任何创造性的解决方案来完成这项工作？ 我希望块标签保持相同的大小。

Answer 1

使用最小高度而不是高度

a{min-height:70px;}

Answer 2

从您的CSS 规则中删除该height属性。a

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/

Answer 3

看起来你想在 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>

Answer 4

height将您的更改a为min-height或auto。

用另一个 span将spans 内的 s括起来。a

添加display:table;到新跨度。

display:table-cell将和添加vertical-align:center;到现有的a.

当我在你的小提琴上尝试它时工作，希望我有更多的时间，希望它有所帮助。=)

Answer 5

在这里看到这个问题，如果你想保持你想要的大小并根据他的长度改变文本的大小。