一些常见布局

一些常见布局

目录

• 一些常见布局
  • 左右布局
    • Fill rest
      • 左边固定宽度，右边自适应
    • Percentage columns
    • Raw flex style
    • Flex左右布局 两侧内容等高
  • 上下布局

左右布局

Fill rest

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

方法一：

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

方法二：

antd

<Row>
    <Col flex="100px">100px</Col>
    <Col flex="auto">Fill Rest</Col>
</Row>

Percentage columns

<Row>
  <Col flex={2}>2 / 5</Col>
  <Col flex={3}>3 / 5</Col>
</Row>

Raw flex style

<Row>
  <Col flex="1 1 200px">1 1 200px</Col>
  <Col flex="0 1 300px">0 1 300px</Col>
</Row>

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撑满