padding——图片文字的自适应布局

最新推荐文章于 2021-06-28 10:45:49 发布

原创最新推荐文章于 2021-06-28 10:45:49 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种图片与文字自适应布局的方法，并讨论了如何通过CSS控制Textarea的大小调整功能，确保网页布局的一致性和美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片宽度固定，文字宽度的自适应布局

padding在子元素上

HTML

<div class="test">
    <img src="头像.jpg">
    <div class="auto">
        如textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。如下图就是在Google chrome中的textarea的默认显示，textarea右下角有一个可以控制缩放的按钮。
        一般情况下，textarea是被固定宽度和高度的，如果你不愿意让其任意缩放,将textarea中resize的属性值设置成vertical，这个是允许用户只能调节高度，这样页面就不会变形了
    </div>
</div>

CSS

        img{
            width:100px;
            height: 100px;
            float: left;
        }
        .auto {
            padding-left: 120px;
        }

padding在容器上

HTML

<div class="pbox">
    <img src="头像.jpg">如textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。如下图就是在Google chrome中的textarea的默认显示，textarea右下角有一个可以控制缩放的按钮。一般情况下，textarea是被固定宽度和高度的，如果你不愿意让其任意缩放，你可以为textarea添加resize:none的css属性。这样就可以去除Webkit内核的浏览器的默认显示。将textarea中resize的属性值设置成vertical，这个是允许用户只能调节高度，这样页面就不会变形了
</div>

CSS

        .pbox{
            padding-left: 120px;
        }
        .pbox img{
            float: left;
            margin-left:-120px ;
        }