Question

我有两个div元素。第二个是第一个元素。第二，我显示一些文字。对于第二个div，我将高度设置为自动，当我在div中放置更多文字时，身高会更高。另外，我将第一个div的高度设置为自动，但第一个div的高度始终相同。

如何将DIV的高度设置为可靠的文本行数？

<div class="first-div">
  <div class="second-div">
  </div>
</div>

.first-div {
    background-color: #f5f5f5;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 6px;
    border: 1px solid #b8b8b8;
    text-align: justify;
    padding: 4px 4px 4px 4px;
    word-wrap: break-word;
    height: auto;
    min-height: 75px;
}
.second-div {
    width: 30%;
    float: right;
    font-size: 9px;
    height: auto;
}

Answer 1

将overflow:hidden添加到.first-div。

您可以查看此问题：How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?

Answer 2

<强> Demo 1

将overflow: auto添加到外部div（.first-div）

CSS

.first-div {
    background-color: #f5f5f5;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 6px;
    border: 1px solid #b8b8b8;
    text-align: justify;
    padding: 4px 4px 4px 4px;
    word-wrap: break-word;
    height: 100%;
    min-height: 75px;
    overflow:auto; /* added */
}
.second-div {
    width: 30%;
    float: right;
    font-size: 9px;
    height: auto;
}

Demo 2

或者您可以将div添加到html并将其样式设置为clear: both

CSS

.clear {
    clear: both;
}

HTML

<div class="first-div">
  <div class="second-div"></div>
     <div class="clear"></div>
</div>

Answer 3

您可以从min-height中移除.first-div并应用overflow: hidden查看小提琴，我认为这就是您想要的。

在.second-div中，您可以使用min-height更改身高。在小提琴中，我有300px。

http://jsfiddle.net/wcnbq9xc/

不使用JQuery自动设置DIV的高度

3 个答案: