首页 > 代码库 > 左图有文本，图片自由缩放

左图有文本，图片自由缩放

2024-08-27 08:59:19   217人阅读

核心点有两个，大盒子设置box-sizing:border-box，这样的话设置padding值后就不会有横向滚动条

然后就是图片左浮动，文本有浮动，这样就能让文本和图片之间有间隔。

由于采用百分比布局，图片就能在窗口变化的时候，自由缩放了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box {
            width: 99%;
            border: 1px solid red;
            padding: 5px;
            box-sizing: border-box;
            /* 清除浮动 */
            overflow: hidden;
        }
        /* 核心部分：图片占据25%，最大宽度为图像宽度,图像左浮动，文本右浮动 */
        .box img{
            width: 25%;
            max-width: 200px;
            display: block;
            float: left;
        }
        .box h3,.box p{
            width: 74%;
            float: right;
        }
        .box h3 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/dunstan.jpg">
        <h3>这是一个标题,这是一个很长的标题,这是一个很长的标题这是一个很长的标题</h3>
        <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
    </div>
</body>
</html>

演示地址：http://down.yesyes.wang/book/04/demo.html

左图有文本，图片自由缩放


联系
我们