布局方式－inline-block布局

最新推荐文章于 2022-07-18 10:06:48 发布

weixin_30719711

最新推荐文章于 2022-07-18 10:06:48 发布

阅读量67

点赞数

原文链接：http://www.cnblogs.com/wzndkj/p/10362666.html

版权

.像文本一样排block元素

.没有清除浮动等问题

.需要处理间隙

一种方式

<style>
　　.container{
　　　　width: 800px;
　　　　height: 200px;
　　　　font-size: 0;
　　　　/**
　　　　* 使用inline-block，就相当于是文本，文字和文字之间肯定是有间隙的
　　　　* 不可能连在一起，不管是什么字体，所以这里要将文本设置为0
　　　　*/
　　}
　　.left{
　　　　font-size: 14px;
　　　　background: red;
　　　　display: inline-block;
　　　　width: 200px;
　　　　height: 200px;
　　}
　　.right{
　　　　font-size: 14px;
　　　　background: blue;
　　　　display: inline-block;
　　　　width: 600px;
　　　　height: 200px;
　　}
</style>
<body>
　　<div class="container">
　　　　<div class="left">左</div>
　　　　<div class="right">右</div>
　　</div>
</body>

另一种处理方式

观察间隙的来源，他其实来自于html标记语言的空白

如图，是这个间隙，一种写成这样

<div class="container">
　　<div class="left">左</div><div class="right">右</div>
</div>

另外一种写成这样

<div class="container">
　　<div class="left">左</div><!--
　　--><div class="right">右</div>
</div>

把标记语言的空白注释掉也是可以掉

但是因为这两种方式写起来都比较麻烦，所以一般还是使用字体的方式

＊缺陷：自适应的布局比较麻烦

转载于:https://www.cnblogs.com/wzndkj/p/10362666.html

weixin_30719711

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局方式－inline-block布局

.像文本一样排block元素.没有清除浮动等问题.需要处理间隙一种方式<style>　　.container{　　　　width: 800px;　　　　height: 200px;　　　　font-size: 0;　　　　/**　　　　* 使用inline-block，就相当于是文本，文字和文字之间肯定是有间隙的...
复制链接

扫一扫