杂记 CSS布局

1. 侧边栏的高度自适应，如图：

右边的其他方式登录的白色竖条div要根据下面的内容自适应高度。这个页面总的布局是：

<div class="head"></div>

<div class="body">

    <div class="登录"></div>

   <div class="其他方式登录">

       <button>可能有多个按钮</button>

   </div>

</div>

<div class="foot"></div>

1.1 其中的body为了能水平居中，所以有以下属性：

margin: 0 auto;

display:flex;
direction:row;  

 为了让子div能高度自适应，所以再添加属性：

align-items: flex-start;

这个属性是让它的两个div能顶端对齐。

1.2 其中的 class="其他方式登录" 为了让子button水平居中，添加属性：

display:inline-block;
text-align:center;

又为了能高度自适应，添加属性：

height:auto;

1.3其中的button不需要做什么特别的处理