株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

02-05) 1. 横に並んだボックスの高さを揃える
   ・・・ htmlのstyle="height: 240px"で行うのが楽

 

リスト要素を並べて表示し、高さを揃える

dl要素のクラス名(.height240)で表示する表示するリストの高さ(height: 240px;)を指定する。

cssの書き方 /*--------------------------------------------------
02-05 横に並んだボックスの高さを揃える
--------------------------------------------------- */
.height240{height: 240px;}
.list_341{
 margin-left:70px;
 float: left;
 width: 600px;
}
.list_341 dl{
 float: left;
 border: 1px #000000 dotted; /* 画像単位に枠を指定する */
 padding: 0 8px 0 0; /* 枠と画像に隙間を設ける */
 width: 150px;
}
.list_341 dt{
 position: relative;
 margin: 0 0 5px 0;
 padding: 6px 6px 0 6px;
 width: 138px;
 font-size: small;
 line-height: 1.0;
}
.list_341 dt span{
 display: block;
 margin: 0 0 5px 0;
 width: 138px;
 height: 76px;
}
*html .list_341 dt span{ /*for IE6 hack*/
 background-image: none;
}
.list_341 dt img{
 position: relative;
 padding: 0 3px 0 0; /* 枠と画像に隙間を設ける */
 border-right: 4px solid #808080 ; /* 右黒枠で写真を立体的に見せる */
 border-bottom: 4px solid #808080 ; /* 下黒枠で写真を立体的に見せる */
}
.list_341 dd{
 position: relative;
 margin: 0 0 0 10px; /* 左にマージンを取る(必須)  */
 width: 138px;
 font-size: small;
 line-height: 1.2;
 text-align:left;
}
.list_341 dd a[target=_blank]{
 padding: 0 15px 0 0;
 background-image: url("../images/inc_icon_blank.gif"); /*文字の後のマークを追加 */
 background-repeat: no-repeat;
 background-position: right center;
}
HTMLの使用例  <div class="list_341">
<dl class="height240">
<dt><img src="../images/inc_member01.jpg" alt="" width="138" height="76" />
横浜まこと
</dt>
<dd>WebデザイナーやFlashディベロッパーとして活動す一方、プロデューサーとして様々なント運営携わる。
<br />
2002年INEXを創業。
</dd>
<dd><a href="http://www.inex.co.jp" target="_blank">株式会社アイネックス</a></dd>
</dl>
<dl class="height240">
<dt><img src="../images/inc_member02.jpg" alt="" width="138" height="76" />
関内まなみ
</dt>
<dd>神奈川大学建築学科卒業後、大手設計会社にて都市計画に携わる。2010年よりINEXに参加、
星空タウン街づくり委員会委員長。<br />
</dd>
</dl>
<dl class="height240">
<dt><img src="../images/inc_member03.jpg" alt="" width="138" height="76" />
桜木まゆこ</dt>
<dd>ロンドンでの3年間のパティシエ留学を経て、2010年よりINEXに参加。
INEX Cafeの店長も努める。
</dd>
</dl>
</div>

横浜まこと
WebデザイナーやFlashディベロッパーとして活動す一方、プロデューサーとして様々なント運営携わる。
2002年INEXを創業。
株式会社アイネックス
関内まなみ
神奈川大学建築学科卒業後、大手設計会社にて都市計画に携わる。2010年よりINEXに参加、 星空タウン街づくり委員会委員長。
桜木まゆこ
ロンドンでの3年間のパティシエ留学を経て、2010年よりINEXに参加。 INEX Cafeの店長も努める。