acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

高さの違うブロックを横並びで折り返した時の崩れを無くす

ads

2012/8/20 font-size0のサンプルを追加

floatでdivやliなどのブロックを横並びにした場合、それぞれの高さが違うと折り返した際に一番高さのあるブロックの次へ折り返してしまいます。

<ul>
<li>ブロック1</li>
<li>ブロック2・・・ブロック2</li>
<li>ブロック3</div>
<li>ブロック4・・・ブロック4</li>
<li>ブロック5</li>
<li>ブロック6・・・ブロック6</li>
<li>ブロック7・・・ブロック7</li>
<li>ブロック8・・・ブロック8</li>
<li>ブロック9・・・ブロック9</li>
<li>ブロック10・・・ブロック10</li>
<li>ブロック11・・・ブロック11</li>
<li>ブロック12・・・ブロック12</li>
</ul>

li{
float:left;
width:100px;
background:#999999;
}

  • ブロック1
  • ブロック2
    ブロック2
    ブロック2
    ブロック2
  • ブロック3
  • ブロック4
    ブロック4
    ブロック4
    ブロック4
    ブロック4
    ブロック4
  • ブロック5
  • ブロック6
    ブロック6
    ブロック6
  • ブロック7
    ブロック7
    ブロック7
    ブロック7
  • ブロック8
    ブロック8
  • ブロック9
    ブロック9
    ブロック9
  • ブロック10
    ブロック10
  • ブロック11
    ブロック11
    ブロック11
  • ブロック12
    ブロック12

この崩れを回避する方法としてinline-blockを使う方法があります。
インラインブロックはブロックの特性を持ちながらインラインになるためfloatを使わなくても横並びで表示することができます。

しかし、インラインの性質上ブロックとブロックの間に改行が入ると3px~5px程の隙間が空いてしまいます。そのためmarginやpaddingの指定の際は少し少な目にする必要があります。

また、インラインブロックはIE7以下に対応していないので、/display:inline;/zoom:1;を書き加えると同様の表示になります。

li{
display:inline-block;
/display:inline;
/zoom:1;
width:100px;
background:#999999;
vertical-align:top
}

  • ブロック1
  • ブロック2
    ブロック2
    ブロック2
    ブロック2
  • ブロック3
  • ブロック4
    ブロック4
    ブロック4
    ブロック4
    ブロック4
    ブロック4
  • ブロック5
  • ブロック6
    ブロック6
    ブロック6
  • ブロック7
    ブロック7
    ブロック7
    ブロック7
  • ブロック8
    ブロック8
  • ブロック9
    ブロック9
    ブロック9
  • ブロック10
    ブロック10
  • ブロック11
    ブロック11
    ブロック11
  • ブロック12
    ブロック12

この隙間を無くしたい場合はfloatとjs(jquery.tile.jsjQuery Auto Heightなど)を併用する、インラインブロックのままの場合は、ulのfont-sizeを0にする方法、htmlを一行に書く方法、コメントタグで改行をつなげる方法があります。

まずはulのfont-sizeを0にする方法です。
liがプレーンテキストの場合はliにfont-sizeをpxで指定しなおします。ulでfont-sizeが0になってしまっているのでemや%などの相対的単位が使えないからです。またwebkit系のブラウザではスペースが空いてしまう可能性があります。

ul{
font-size:0;
}
ul li{
display:inline-block;
/display:inline;
/zoom:1;
font-size:16px;
width:100px;
background:#999999;
vertical-align:top
}

  • ブロック1
  • ブロック2
    ブロック2
    ブロック2
    ブロック2
  • ブロック3
  • ブロック4
    ブロック4
    ブロック4
    ブロック4
    ブロック4
    ブロック4
  • ブロック5
  • ブロック6
    ブロック6
    ブロック6
  • ブロック7
    ブロック7
    ブロック7
    ブロック7
  • ブロック8
    ブロック8
  • ブロック9
    ブロック9
    ブロック9
  • ブロック10
    ブロック10
  • ブロック11
    ブロック11
    ブロック11
  • ブロック12
    ブロック12

次にhtmlを一行に書く方法、またはコメントタグで改行をつなげる方法です。
一行で書いてしまうかコメントタグの中で改行するかの違いですが、やっていることはどちらも同じで、htmlで改行しないということです。

<ul>
<li>ブロック1</li><li>ブロック2・・・ブロック2</li><li>ブロック3</li><li>ブロック4・・・ブロック4</li><li>ブロック5</li><li>ブロック6・・・ブロック6</li><!--
--><li>ブロック7・・・ブロック7</li><!--
--><li>ブロック8・・・ブロック8</li><!--
--><li>ブロック9</li><!--
--><li>ブロック10・・・ブロック10</li><!--
--><li>ブロック11・・・ブロック11</li><!--
--><li>ブロック12・・・ブロック12</li><!--
</ul>

  • ブロック1
  • ブロック2
    ブロック2
    ブロック2
    ブロック2
  • ブロック3
  • ブロック4
    ブロック4
    ブロック4
    ブロック4
    ブロック4
    ブロック4
  • ブロック5
  • ブロック6
    ブロック6
    ブロック6
  • ブロック7
    ブロック7
    ブロック7
    ブロック7
  • ブロック8
    ブロック8
  • ブロック9
    ブロック9
  • ブロック10
    ブロック10
  • ブロック11
    ブロック11
    ブロック11
  • ブロック12
    ブロック12

リストのCSSテクニック

floatを使ったCSSテクニック

Copyright (C) acky. All Rights Reserved.