css控制图文混排、图文自适应容器显示的效果

最新推荐文章于 2023-01-19 13:33:15 发布

丰云

最新推荐文章于 2023-01-19 13:33:15 发布

阅读量1.5k

点赞数

分类专栏：前端应用文章标签：图文混排自适应

本文链接：https://blog.csdn.net/foren_whb/article/details/80653221

版权

前端应用专栏收录该内容

61 篇文章 0 订阅

订阅专栏

闲来无聊，写了一个css控制图文混排、图文自适应容器显示的效果。

下面js，是鼠标拖动div缩放大小的代码，跟样式无关，目的是展示自适应效果。

留存参考：

<!DOCTYPE html />
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>图文混排自适应</title>
    <script src="./js/jquery-3.1.1.min.js"></script>
</head>
<body>
    <div id="testDiv" style="width:360px;height:auto;border:1px solid #ccc;padding:3px;overflow:hidden;">
        <img alt="" src="./images/500.jpeg" style="width:30%;height:auto;float:left;" />
        注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理.
        注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理.
    </div>
    <div id="msg">
    </div>
</body>

</html>
<script type="text/javascript">
    var div = $('#testDiv');
    div.w = $('#testDiv').width();
    div.h = $('#testDiv').height();
    div.on("mousedown", function (event) {
        div.mousekey = true;
        div.x = event.pageX;
        div.y = event.pageY;
        $(document).on('mousemove.chatMove', function (e) {
            var x = div.w + e.pageX - div.x
            var y = div.h + e.pageY - div.y;
            $('#msg').html('width:' + x + 'px; height:' + y + 'px');
            div.css({ width: x, height: y });
        }).on('mouseup.chatUp', function () {
            div.mousekey = false;
            $(document).off('mousemove.chatMove').off('mouseup.chatUp');
        });
    }).on('mouseup', function () {
        div.mousekey = false;
        $(document).off('mousemove.chatMove').off('mouseup.chatUp');
    });
</script>

丰云

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css控制图文混排、图文自适应容器显示的效果

闲来无聊，写了一个效果，留存参考：&lt;!DOCTYPE html /&gt;&lt;html&gt;&lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;图文混排自适应&lt;/title&gt; &lt;script
复制链接

扫一扫