WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

inline-blockやfloatで横並びにした時に高さを揃える

デモ
http://efu.sakura.ne.jp/web/inline-block/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>inline-blockで横並びにした要素の高さを揃える</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <ul>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    </ul>
    <ul>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    </ul>
  </div>
</body>
</html>
@charset "utf-8";

.wrapper {
  margin: 50px auto;
}

ul {
  width: 750px;
  margin: 0 auto 10px;
  text-align: center;
  letter-spacing: -.4em;
  overflow:hidden;
}

ul li {
  display: inline-block;
  width: 200px;
  margin-bottom: -32768px;
  margin-right: 50px;
  padding-bottom: 32768px;
  letter-spacing: 0;
  vertical-align: top;
  background: #eee;
}

ul li:nth-child(3n) {
  margin-right: 0;
}

縦の間を調節したい場合は1列ごとに囲む必要がある。
borderをつけた場合は下が切れる。