使用flex图文混排

来源：互联网发布：在线二次元av淘宝编辑：程序博客网时间：2024/06/04 17:42

ps:全部在谷歌浏览器中测试

经典的图文混排

这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">    <style type="text/css">    a{        display: flex;        display: -webkit-flex;        height: 100px;        background: orange;    }    .img{        width: 120px;         background: red;    }    .content{        flex: 1;        padding: 0 10px;        overflow: hidden;        background: skyblue;    }    </style></head><body><a href="">    <div class="img">        img    </div>    <div class="content">        <h4>this is title</h4>        <span>contentab</span>    </div></a></body></html><script type="text/javascript" src="../jq/js/jquery-1.11.3.js"></script><script type="text/javascript"></script>

父级使用display: flex,左侧用width：100px,右侧使用flex:1。会自动的水平排列，两个元素形成了类似display:inline-block效果

子级的高度问题

没有设置高度，但是两个子级元素高度却自动充满了父级元素
如果给他们设置高度，高度会生效

.img{        width: 120px;         height: 50px;        background: red;    }    .content{        flex: 1;        height: 60px;        padding: 0 10px;        overflow: hidden;        background: skyblue;    }

这里写图片描述

右侧文字过长

这里写图片描述

右侧文字过长则会产生挤压，导致左侧变窄（虽然设置了宽度）

但是如果加上overflow:hidden.则此现象不会出现
这里写图片描述

还有几个有趣的现象：
1. 右侧padding不起效果了。
2. 如果是一个短的字符串则会换行显示（正常情况都是这个样子）

给子元素的子元素加overflow:hidden

这里写图片描述

由上面两个图可知，p受到了padding的限制，span还是老样子

浏览器还自动加上了一些样式

溢出隐藏, …

这里写图片描述
用常用的方法 span 无法实现此效果

这里写图片描述

        overflow: hidden;        white-space: nowrap;        text-overflow: ellipsis;

由上面可知，我们这3行代码，一般都是加载块级元素上，对其行内元素或文字起效果

阅读全文

0 0