左右布局

CSS Tricks 中介绍了几种常见的左右布局方法 详情

• Using Absolute Positionin(绝对定位)
• Using (fake) Tables(display:table-cell)
• Using Floats(浮动)
• Using Inline-Block(行内块)
• Using Flexbox
• Using Grid Layout

本篇主要介绍浮动和绝对定位以及行内块用法

浮动(推荐使用)

  <div class="continer clearfix">
    <div class="left">
      <span class="label">left</span>
      <p></p>
      <span class="endlabel">left</span>
    </div>
      <div class="right">
      <span class="label">right</span>
      <p></p>
      <span class="endlabel">right</span>
    </div>
  </div>

*{
  box-sizing:border-box;/*padding也算在宽度内*/
}
.continer{
  border:5px solid #F5C852;
  width:400px;
  height:400px;
}
.left,.right{
  border:5px solid #80C3AD;
  float:left;
  width:50%;
  height:100%;
  position:relative;
}
/*在所有需要并排显示(float)的元素的父元素上添加类 clearfix*/
.clearfix::after{ 
  content:'';
  display: block;
  clear:both;
}

效果

绝对定位

 <div class="continer">
    <div class="left">
      <span class="label">left</span>
      <p></p>
      <span class="endlabel">left</span>
    </div>
     <div class="right">
      <span class="label">right</span>
      <p></p>
      <span class="endlabel">right</span>
    </div>

*{
  box-sizing:border-box;
}
.continer{
  border:5px solid #F5C852;
  width:800px;
  height:400px;
  position:relative;
}
.left{
  border: 5px solid #80C3AD;
  width:50%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}
.right{
  border: 5px solid #80C3AD;
  width:50%;
  height:100%;
  position:absolute;
  top:0;
  left:50%;
}

行内块

为啥会换行？

再看看这个

水平居中和垂直居中

块级元素水平居中

/*要水平居中块元素（如<div>），请使用 margin: auto;*/
.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

文本对齐

/*要将文本置于元素中间，请使用 text-align: center;*/
.center {
    text-align: center;
    border: 3px solid green;
}

垂直居中使用 padding

/*有很多方法可以在CSS中垂直居中元素。一个简单的解决方案是使用顶部和底部padding：*/
.center {
    padding: 70px 0;
    border: 3px solid green;
}
/*要垂直和水平居中，请使用padding和text-align: center：*/

垂直居中 使用line-height

/*另一个诀窍是使用line-height属性的值等于height属性。*/
.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}