<h1>div 預設排列方式 display: block</h1>
<div class="shelf">
<div class="goods goods1">
  <h3 class="blue">尿布藍</h3>
  <h3 class="blue">啤酒藍</h3>
</div>
<div class="goods goods1">
  <h3 class="red">尿布紅</h3>
  <h3 class="red">啤酒紅</h3>
</div>
<div class="goods goods1">
  <h3 class="green">尿布綠</h3>
  <h3 class="green">啤酒綠</h3>
</div>
</div>

<h1>span 預設排列方式 display: inline</h1>
<div class="shelf">
<span class="goods goods2">
  <h3 class="blue">尿布藍</h3>
  <h3 class="blue">啤酒藍</h3>
</span>
<span class="goods goods2">
  <h3 class="red">尿布紅</h3>
  <h3 class="red">啤酒紅</h3>
</span>
  <span class="goods goods2">
  <h3 class="green">尿布綠</h3>
  <h3 class="green">啤酒綠</h3>
</span>
</div>

<h1>其它排列方式 display: inline-block</h1>
<div class="shelf">
<div class="goods goods3">
  <h3 class="blue">尿布藍</h3>
  <h3 class="blue">啤酒藍</h3>
</div>
<div class="goods goods3">
  <h3 class="red">尿布紅</h3>
  <h3 class="red">啤酒紅</h3>
</div>
<div class="goods goods3">
  <h3 class="green">尿布綠</h3>
  <h3 class="green">啤酒綠</h3>
</div>
  <div class="goods goods3">
  <h3 class="green">尿布綠</h3>
  <h3 class="green">啤酒綠</h3>
</div>
  <div class="goods goods3">
  <h3 class="green">尿布綠</h3>
  <h3 class="green">啤酒綠</h3>
</div>
  <div class="goods goods3">
  <h3 class="green">尿布綠</h3>
  <h3 class="green">啤酒綠</h3>
</div>
</div>



.blue{
  color: blue;
}
.red{
  color: red;
}
.green{
  color: green;
}
.shelf{
  background: cyan;
  padding: 10px;
  width:  500px;
  margin-bottom: 10px;
}
.goods{
  width: 100px;
  height: 100px;
  background: orange;
  text-align: center;
}
.goods1{
  //display: block;
}
.goods2{
 //display: inline;
}
.goods3{
  display: inline-block;
}

h3{
  //display: inline;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.