ryoakg
9/10/2017 - 10:33 AM

float:left vs display:inline-block, table-cell // source https://jsbin.com/dikelunone

float:left vs display:inline-block, table-cell

// source https://jsbin.com/dikelunone

jsbin.dikelunone.css
content_copyfile_download
body{
  width:330px;
  
}
div{
  width: 100px;
  border: 1px solid black;
  text-align: center;
}

.float-left{
  float:left;
}
.inline-block{
  display: inline-block;
}
.table-cell{
  display: table-cell;
}

.a{ height: 60px; }
.b{ height: 40px; }
.c{ height: 10px; }
.d{ height: 40px; }
.e{ height: 60px; }
.f{ height: 30px; }
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>float:left vs display:inline-block, table-cell</title>
<style id="jsbin-css">
body{
  width:330px;
  
}
div{
  width: 100px;
  border: 1px solid black;
  text-align: center;
}

.float-left{
  float:left;
}
.inline-block{
  display: inline-block;
}
.table-cell{
  display: table-cell;
}

.a{ height: 60px; }
.b{ height: 40px; }
.c{ height: 10px; }
.d{ height: 40px; }
.e{ height: 60px; }
.f{ height: 30px; }
</style>
</head>
<body>

  <div class="a float-left">a</div>
  <div class="b float-left">b</div>
  <div class="c float-left">c</div>
  <div class="d float-left">d</div>
  <div class="e float-left">e</div>
  <div class="f float-left">f</div>
  <div style="clear:both;border:0"></div>
  <hr />
  <div class="a inline-block">a</div>
  <div class="b inline-block">b</div>
  <div class="c inline-block">c</div>
  <div class="d inline-block">d</div>
  <div class="e inline-block">e</div>
  <div class="f inline-block">f</div>
  <hr />
  <div class="a table-cell">a</div>
  <div class="b table-cell">b</div>
  <div class="c table-cell">c</div>
  <div class="d table-cell">d</div>
  <div class="e table-cell">e</div>
  <div class="f table-cell">f</div>
 


<script id="jsbin-source-css" type="text/css">body{
  width:330px;
  
}
div{
  width: 100px;
  border: 1px solid black;
  text-align: center;
}

.float-left{
  float:left;
}
.inline-block{
  display: inline-block;
}
.table-cell{
  display: table-cell;
}

.a{ height: 60px; }
.b{ height: 40px; }
.c{ height: 10px; }
.d{ height: 40px; }
.e{ height: 60px; }
.f{ height: 30px; }</script>
</body>
</html>