Web うぇっ部でタグ「heightLine」が付けられているもの

ｻｲﾄﾞﾊﾞｰとﾒｲﾝｺﾝﾃﾝﾂの長さを合わせる。

2008年9月18日 16:55 ：domae

サイドバーを使用したサイトでメインコンテンツが多くなった時、サイドバーが途中でぷつっと切れてしまってかっこ悪くなったことないですか？きちんと構造を計算して作成する方法もありますが、javascriptで簡単にブロックレベル要素の高さを揃えるソフトを聞いたのでここに載せておきます。

http://blog.webcreativepark.net/sample/js/18/heightLine.js
上記へアクセスしてタグをコピペし、jsで保存します。

head要素内に<script type="text/javascript" src="./heightLine.js"></script>を記述します。
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
margin:10px;
width:600px;
border:1px blue solid;
padding-bottom:1px;
}
ul li{
list-style-type:none;
margin:2px;
width:194px;
float:left;
border:1px red solid;
}
* html ul li{/*ieのfloatバグ回避の為*/
margin-left:1px;
}
li.firstrow{
clear:both;
}
ul:after{
content:"";
display:block;
clear:both;
}

</style>

<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="./heightLine.js"></script>
<title>ブロックレベル要素の高さを揃えるheightLine.js</title>
</head>
<body>
<ul class="heightLineParent">/*親要素として配置*/
<li>1すごく長い文章です。すごく長い文章です。すごく長い文章です。すごく長い文章です。すごく長い文章です。すごく長い文章です。すごく長い文章です。すごく長い文章です。すごく長い文章です。すごく長い文章です。すごく長い文章です。
</li><li>2短い文章です。</li>
<li>3少し短い文章です。</li>
<li>4少し長い文章です。少し長い文章です。</li>
<li>5結構長い文章です。結構長い文章です。結構長い文章です。</li>
<li>6まぁまぁ短い文章です。</li>
</ul>

floatで回り込みをした時に一番多いコンテンツに合わせて幅が統一されます。
liにそれぞれ子要素として指定することもできますが、これが一番使いやすいと思います。

 

タグ: