CSS布局之——div标签嵌套的并排
背景
⾸先是对CSS的布局设置都要嵌⼊在div标签中，然后通过操作div来进⾏布局。同时CSS的布局设置以及内容有很多，主要的包括border、margin、padding这三个属性对于标签的布局起着⾄关重要的作⽤，图像如下，在进⾏CSS布局的时候我们遇到⼀个问题就是，在需要将两个容器进⾏并排处理，查阅了相关内容包括三种⽅式：绝对定位、table排列、float。
⼀、问题解决
1.1 使⽤绝对定位
⾸先在⽗级使⽤relative，在⼦级标签使⽤absolute，在使⽤margin-left属性去并排
.parent {
position: absolute;
}
.child-1 {
margin-left: 0;
}
.child-2 {
margin-left: 50%;
}
1.2 float布局
使⽤float布局时，只要⼦级的div宽度之和⼩于⽗级的宽度那么就会并列在⼀起，因此会出现溢出跨⾏。
.child-1 {
float: left;
}
.child-2 {
float: left;
}
1.3 使⽤table布局position标签属性
在⽗级使⽤table，在⼦级使⽤table-cell这样样的布局就是等宽
.parent {
display: table;
}
.child-1 {
display: table-cell;
}
.child-2 {
display: table-cell;
}
⼆、结果
个⼈是⽐较推荐绝对定位，这种⽅式就和GUI⼀样，通过布局来控制。