Question

这是我的jsfiddle

这是标记（css in fiddle）。

<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

使用min-height而不是height

a{min-height:70px;}

Answer 2

从height CSS规则中删除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的{{1}}更改为a或min-height。

将auto内的span包含在另一个范围内。

将a添加到新范围。

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

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

Answer 5

如果您想保留所需的尺寸并根据文字长度更改文字大小，请查看问题here。

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

5 个答案: