横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
リスト要素を並べて表示し、高さを揃える
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> |