通过王老师的讲解,让我认识到了自己的不足,也学到了一种新的布局方式(主要是宋老师“恐吓”我们,说如果我们去面试,面试官如果要我们使用这种方式,我们怎么办,怎么解决,我才想深入了解下的),王老师提出了两个问题,她自己也为我们解答了,现在需要我们自己去总结,化为自己的知识。
第一个问题:为什么会两个内联标签之间会出现空格
上面这段代码,先定义了一个大div(maxBox),然后在定义了两个左右的div,分别是left、right,再把块集标签div转换为内联标签。这样两个div就会出现在一行里面了。
第二个问题:当right有多个p时,他们两个会对不齐
会出现这种效果。那么他是怎么出现的,我们该怎么解决。
出现的原因是x基线的问题,基线对齐方式是他进行内容的底端对齐,就是“我是谁“”和第三个“我来自什么”的底端对齐,所以会出现这种情况。解决的方案呢?既然是x基线的对齐方式有问题,那么我们可以更改对齐方式。首先找到vertical-align,把他的值设置为top,这样他就会上边框对齐。我们把这个属性值写在共同的里面,以为两个的对齐方式要一样。
最后的结果:
第一个问题:为什么会两个内联标签之间会出现空格
<style>
.maxBox {
width: 500px;
height: 500px;
background-color: red;
}
.left, .right {
display: inline-block;
}
.left {
width: 200px;
height: 200px;
background-color: green;
margin-right: -5px;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="maxBox">
<div class="left">
<p>我是谁</p>
</div>
<div class="right">
<p>我来自什么</p>
</div>
</div>
</body>
上面这段代码,先定义了一个大div(maxBox),然后在定义了两个左右的div,分别是left、right,再把块集标签div转换为内联标签。这样两个div就会出现在一行里面了。
上面代码运行结果:
1.以为那条空隙是换行出现的,那么我们就不换行。把right的div放在left的div后面让他们连接起来。这样就不会产生空隙了。
3.对left添加一个margin-right属性的值,令margin-right:-5px;。这样我们也能实现两个div无缝连接。
第二个问题:当right有多个p时,他们两个会对不齐
会出现这种效果。那么他是怎么出现的,我们该怎么解决。
出现的原因是x基线的问题,基线对齐方式是他进行内容的底端对齐,就是“我是谁“”和第三个“我来自什么”的底端对齐,所以会出现这种情况。解决的方案呢?既然是x基线的对齐方式有问题,那么我们可以更改对齐方式。首先找到vertical-align,把他的值设置为top,这样他就会上边框对齐。我们把这个属性值写在共同的里面,以为两个的对齐方式要一样。
最后的结果: