由图看出两个方块之间有空格
出现原因是使用了display: inline-block;它使得块级元素变为内联元素，使得两个元素之间有个空格
有三种方法可以解决
一、在左边div中margin-right添加负值
二、两个div写在同一行
三、给最外面的div把font-size设为0在两个小的div里面设置自身字体大小
效果如下
<div class="container">
<div class="left">
<p>dfsbsdffs</p>
</div>
<div class="right">
<p>fsdk.kjs.df</p>
<p>fsdk.kjs.df</p>
<p>fsdk.kjs.df</p>
</div>
</div>
当其中一个div内设置多行就会出现以下情况
出现这种情况的原因是：基线问题
这里面左边的div只有一行，右边div有三行导致，左边的一行直接与右边的第三行对齐
解决方法即把vertical-align的默认值不是基线对齐就可以了可以改为
vertical-align: top;
显示效果为下
全部代码如下：
<style type="text/css">
.container{
width: 1000px;
height: 1000px;
background-color: red;
font-size: 0;
}
.left,.right{
display: inline-block;
font-size: 16px;
}
.left{
width: 400px;
height:400px;
background-color: yellow;
/*margin-right: -10px;*/
vertical-align: top;
}
.right{
width: 400px;
height: 400px;
background-color:blueviolet;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<p>dfsbsdffs</p>
</div>
<div class="right">
<p>fsdk.kjs.df</p>
<p>fsdk.kjs.df</p>
<p>fsdk.kjs.df</p>
</div>
</div>
</body>
扫一扫
1177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
