search

renmm / blogs

整理自己平时遇到的技术wiki
1 stars 0 forks source link

layout #28

Open renmm opened 4 years ago

renmm commented 4 years ago

左右2列布局

场景: 常见于移动端表单布局

使用flex布局，核心是justify-content: space-between; 表示：

均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点 

.layout-2-columns{
  display: flex;
  justify-content: space-between;
}
<div class="layout-2-columns" >
  <div class="label">城市</div>
  <div class="wrapper">
    <select name="cars" id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
  </div>
</div>

参考