用CSS实现左右布局
- 用display: inline-block 实现
// CSS
.father{
width: 500px;
height: 200px;
border: 5px solid #eee;
}
.left {
height: 100%;
width: 200px;
border-right: 5px solid #eee;
display: inline-block;
}
.right{
display: inline-block;
width: calc(100% - 205px);
}
//html
<div class="father">
<div class="left">左边</div>
<div class="right">
右边
</div>
</div>
元素间存在空白符，导致布局错位
但是按照上面的代码运行，并没有出现我们想要的效果，两个子元素仍旧上下排列啦
造成这样的原因是元素间会有空白。这个空白其实是空白符(大概5到6个像素)，因为 inline-block 会使元素在行内排列，也就是跟文字在一起排列，而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符，所以就会出现缝隙，就导致子元素超出了父容器，导致了换行。
我们通过给父容器设置white-space: nowrap;，但是这个空白符还是没有消除。我们可以用以下两种方式消除这个空白符
- 通过给父元素设置
font-size: 0;，使空白符不可见。子元素的字体大小在单独设置 - 将前一个 div 的结束标签和后一个 div 的开始标签贴在一起
vertical-align:baseline 导致元素间出现错位
解决了上面的问题后，我发现往右边的div中新增元素，会导致布局错乱，出现下面这种情况
出现的原因：
display: inline-block:这个属性使的元素具有块级元素与行内元素的特性,而行内元素有一个vertical-align的属性用于设置元素的垂直对齐方式vertical-align： 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。默认是baseline,元素放在父元素的基线上。 下面是vertical-align属性的一些值 值 | 描述 | | ----------- | -------------------------------------- | | baseline | 默认。元素放置在父元素的基线上。 | | sub | 垂直对齐文本的下标。 | | super | 垂直对齐文本的上标 | | top | 把元素的顶端与行中最高元素的顶端对齐 | | text-top | 把元素的顶端与父元素字体的顶端对齐 | | middle | 把此元素放置在父元素的中部。 | | bottom | 把元素的顶端与行中最低的元素的顶端对齐。 | | text-bottom | 把元素的底端与父元素字体的底端对齐。 | | length | | | % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 | | inherit | 规定应该从父元素继承 vertical-align 属性的值。
那要解决错位的问题就要修改vertical-align的对齐方式，修改为vertical-align: top
