自适应内部元素

最新推荐文章于 2020-12-02 10:03:05 发布

LPLIFE

最新推荐文章于 2020-12-02 10:03:05 发布

阅读量240

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lplife/article/details/82564005

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

如下图:

现在需要做的就是,让文字的宽度自适应图片的宽度,也就是如下图:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自适应内部元素</title>
    <style>
        div {
            max-width: 300px;
            max-width: min-content;
            /* margin: auto; */
        }
        div > img {
            max-width: inherit;
        }
    </style>
</head>

<body>
    <p>自适应内部元素</p>
    <div>
        <img src="./1.jpg" alt="" width="300px" height="200px">
        <p>
            The great Sir Adam Catlace was named after Countess Ada Lovelace,
            the first programmer.
       
        </p>
    </div>
    <p>
        hello world!
    </p>
</body>

</html>