一些常见布局

左右布局

左边固定宽度，右边自适应

<div>   
    <div style={{float:"left",width:200, background:"#669999"}}>
    左边内容再次
    </div>   
    <div>    
    这里是右边的内容
    </div>
</div>

Flex左右布局 两侧内容等高

html

<div class="flex-box">
    <div class="col">
    	<p>左侧内容</p>
    </div>
    <div class="col">
    	<p>右侧内容</p><p>右侧内容</p>
    </div>
</div>

css

.flex-box {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    color:white;
}
.flex-box>.col{
    flex: 1;
    padding: 20px;
}
.flex-box>.col:first-child {
    background: red;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 0;
}
.flex-box >.col:last-child {
    background: black;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 1;
}

一个div中，里面内容按行依次排列 行内元素

<div className="container">
    <span>我是第一个</span>
    <span>我是第二个</span>
    <span>我是第三个</span>
</div>

.container {
  width: auto;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
  }
.container span {
  display: block;
  width: 100px;
  background-color: hotpink;
  float: left;
}
.container>span+span {
  margin-left: 100px;
}

一个div中，里面内容按行依次排列 块级元素

上下布局

上面DIV固定，下面DIV撑满

原文地址：https://www.cnblogs.com/marvelousone/p/12555130.html