0

使用 Twitter Bootstrap，我有一个带有以下 css 的 div：

#notecard.hero-unit
{
    background-image: url("../img/notecard.jpg");
    background-size: cover;
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    height: 1%;
    position: relative;
    text-align: center;
    overflow: hidden;

}

在该 div 内部，我有不同数量的文本h2，其中包含以下 CSS：

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: bold;
  color: #333333;
  text-rendering: optimizelegibility;
}

在#notecard.hero-unit我使用中overflow: hidden;，并且height: 1%因为大多数情况下来自h2滚动的文本比#notecard- 所以正在处理该作业，#notecard现在扩展到h2.

但是，h2只有一两条线的时候，#notecard是很小的。我想#notecard成为默认大小 - 假设300px并且仍然接受溢出（如果有的话）。

我试过设置 height at#noteard和 height at h2to 300px，但都忽略了我需要的溢出。

谢谢。

4

1 回答 1

1

我会在 H2 的父级上使用最小高度：

<style>
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: bold;
  color: #333333;
  text-rendering: optimizelegibility;
}
.hero-unit {
  background-color: #eee;
  background-size: cover;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  min-height: 50px;
  position: relative;
  text-align: center;
  overflow: hidden;
}
</style>

<div class="hero-unit">
   <h2>Some Text</h2>
</div>
<br>

<div class="hero-unit">
   <h2>Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. </h2>
</div>

http://jsfiddle.net/M9bX8/5/

于 2013-01-13T06:19:36.297 回答