美文网首页
根据内容控制div的高度

根据内容控制div的高度

作者: de_self | 来源:发表于2018-10-02 11:35 被阅读12次

    根据div中文本内容的行数来控制div的高度
    我们可以通过两种方式

    min-height
    <div style="min-height:30px">
      {{myText}}
    </div>
    
    父容器结束之前加入一个div

    有时候用了min-height还是不会随着内容自适应高度,您需要检查下容器的子元素是不是有浮动属性,当子元素有浮动时,父元素高度是不会自适应变化的。

    <div class="fu-div">
        <ul>
            <li>内容1</li>
            <li>内容1</li>
        </ul> 
        <div class="add-height-div">
        </div>
    </div>
    

    css部分

    .clearfloat {
        clear: both;
        height: 0;
        font-size: 1px;
        line-height: 0px;
    }
    

    相关文章

      网友评论

          本文标题:根据内容控制div的高度

          本文链接:https://www.haomeiwen.com/subject/eagooftx.html