左右布局

1、左侧不垂直居中

2、左侧垂直居中(可以不是一整块)

  

3、左侧垂直居中有背景(一定是一整块)

 

4、左右内容高度不同，中间有边框线

仿网格和左浮动布局会出现以下问题：

1）设置右border-left,左>右

2）设置左border-right,右>左

3）左右都设置border,影响视觉

 

html：

<div style="width:400px;">

         <div class="g-box">

             <div class="g-left text-center">

                 <span class="sp">左侧</span>

             </div>

             <div class="g-right">

                    <button class="btn btn-default">1</button>

             </div>

         </div>

</div>

 css：

1）仿网格

 ——左侧不居中

    .g-box{overflow: hidden}

    .g-left{float: left;width: 17%}

    .g-right{float: left;width: 73%}

 ——左侧垂直居中(内容长不会自动换行)

    .g-box{position: relative;overflow: hidden}

    .g-left{float: left;width: 17%}

    .g-left .sp{position: absolute;top: 50%;transform: translate(-50%,-50%);}

    .g-right{float: left;width: 73%;margin-left:17%}

 ——左右内容高度不同，中间有边框线

    .g-box{overflow: hidden}

    .g-left{float: left;width: 17%}

    .g-right{float: left;width: 73%}

    .g-box::after{content: "";border-right:1px solid blue;width: 1px;height: 100%;top: 0px;position: absolute;left: 17%;}

2）左浮动,width + 右margin-left

 ——左侧不居中

    .g-box{position: relative}

    .g-left{float: left;width: 70px; }

    .g-right{margin-left: 70px;}

——左侧垂直居中/左侧垂直居中有背景

    .g-box{position: relative}

    .g-left{width: 70px; position: absolute; height: 100%; }

    .g-left .sp{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

    .g-right{margin-left: 70px;}

 ——左右内容高度不同，中间有边框线 

    .g-box{position: relative;overflow: hidden}

    .g-left{float: left;width: 70px; }

    .g-right{margin-left: 70px;}

    .g-box::after{content: "";border-right:1px solid blue;width: 1px;height: 100%;top: 0px;position: absolute;left: 70px;}

3）display:flex+ 左flex: 0 0 70px;

 ——左侧不居中

    .g-box{display: flex;}

    .g-left{flex: 0 0 70px;}

——左侧垂直居中

   .g-box{display: flex; align-items: center;}

   .g-left{flex: 0 0 70px;}

——左侧垂直居中有背景 

    .g-box{display: flex;}

    .g-left{flex: 0 0 70px; position: relative;}

    .g-left .sp{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

 ——左右内容高度不同，中间有边框线

    .g-left{ border-right:1px solid blue;}

4）display:table + 左table-cell,width

 ——左侧不居中

   .g-box{display: table;}

   .g-left{display: table-cell;width: 70px;}

——左侧垂直居中/左侧垂直居中有背景

   .g-box{display: table;}

   .g-left{display: table-cell;width: 70px; vertical-align: middle;}

 ——左右内容高度不同，中间有边框线

   .g-left{ border-right:1px solid blue;}

 

so:只有display:flex和display:table能实现综合背景，居中，边框布局