丢开height属性,让div自适应

早初,当我们设计某些板块内容时,我们总会给它一个height值,让它刚好适合内容大小,比如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    .con{
        height: 100px;
        width: 400px;
        background-color: #9fcdff;
        color: black;
    }
</style>
<body>
<div class="con">
    <p>好好学习天天向上</p>
    <p>好好学习天天向上</p>
    <p>好好学习天天向上</p>
</div>
</body>
</html>

然而在设计的过程中,我们难免会遇到代码内容临时修改的现象,比如我们再在div里增加多了几个<p>标签内容:

<div class="con">
    <p>好好学习天天向上</p>
    <p>好好学习天天向上</p>
    <p>好好学习天天向上</p>
    <p>好好学习天天向上</p>
    <p>好好学习天天向上</p>
</div>

这时的运行起来就会超出div的height值,我们还要重新修改height长度的话,就会过于麻烦。


有没有什么办法可以让长度随着内容的多少进行自适应呢?

.con{
   /* height: 100px;*/
    padding-bottom: 10px;
    width: 400px;
    background-color: #9fcdff;
    color: black;
}

很简单,这里我们只需要把height属性去掉,给它一个padding-bottom的值,就可以了。


这样,无论我们的内容增加了还是减少了,div的长度都会自适应的,是不是简单轻松多了。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭