Div horizontal arrangement

display: flex

Flex Layout The simplest way ,css3 newly added . Parent div Use it directly display: flex; that will do html

<h3>display: flex</h3>
<div class="display-flex">
  <div class="div-size">1</div>
  <div class="div-size">2</div>
  <div class="div-size">3</div>
</div>

Copy

css

.display-flex {
  display: flex;
}

.div-size {
  border: 1px solid red;
  width: 200px;
  height: 120px;
  margin: 10px;
}

Copy

float: left

Realize horizontal layout by floating , This layout is rarely used .（ Note that setting floating elements will affect the normal arrangement of the following elements , Set up clear: both; Can solve ）

html

<h3>float: left</h3>
<div>
  <div class="float-left">4</div>
  <div class="float-left">5</div>
  <div class="float-left">6</div>
</div>
<div class="clear"></div>

Copy

css

.float-left {
  float: left;
  border: 1px solid yellowgreen;
  width: 200px;
  height: 120px;
  margin: 10px;
}

.clear {
  clear: both;
}

Copy

display:inline-block

Inline block element .（CSS2.1 Added value ）

html

<h3>display: inline-block</h3>
<div>
  <div class="inline-block">7</div>
  <div class="inline-block">8</div>
  <div class="inline-block">9</div>
</div>

Copy

css

.inline-block {
  display: inline-block;
  border: 1px solid blue;
  width: 200px;
  height: 120px;
  margin: 10px;
}

Copy