スタイルシートを使って横幅が均等に伸縮する方法について教えてください。

下記のようなテーブルとCSSがあります。
これはベースとなる「<div id="base">」のwidthに対して3分割されたテーブルが画像と共に伸縮します。
これをテーブルを使わずに再現することは可能でしょうか?
お分かりになる方、ズバリのソースで教えていただけると幸いです。
よろしくお願いいたします。

<style type="text/css">
table {
table-layout: fixed;
}
</style>

<div id="base" style="width:700px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img_1.jpg" width="100%"></td>
<td><img src="img_1.jpg" width="100%"></td>
<td><img src="img_1.jpg" width="100%"></td>
</tr>
<tr>
<td align="left" valign="top">テキスト1</td>
<td align="left" valign="top">テキスト2</td>
<td align="left" valign="top">テキスト3</td>
</tr>
</table>
</div>

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/05/28 10:34:51
  • 終了:2010/05/28 11:09:32

回答(1件)

id:Mars No.1

Mars回答回数203ベストアンサー獲得回数202010/05/28 10:54:20

ポイント60pt

サンプルです。

(互換モードのIEでは正しくレンダリングされないのでdoctypeには注意)

【スタイル】
<style type="text/css">
#base {
	width:700px;
}
#base img, #base div{
	width:33.33%;
	float:left;
}
</style>

【body】
<div id="base">
<img src="img_1.jpg" alt=""><!-- 
--><img src="img_1.jpg" alt=""><!--
--><img src="img_1.jpg" alt="">
<div>テキスト1</div>
<div>テキスト2</div>
<div>テキスト3</div>
</div>

id:clab_yasu

早速のご回答ありがとうございました。

勉強になりました!

2010/05/28 11:09:20
  • id:Mars
    ちょっと構成が安易だったのでもう1サンプルだけ。
    <style type="text/css">
    #base {
    width:700px;
    }
    #base div{
    width:33.33%;
    float:left;
    }
    #base img {
    width:100%;
    }
    #base + * { //後続ブロックの回り込み防止
    clear:both;
    }
    </style>

    <div id="base">
    <div>
    <img src="img_1.jpg" alt="">
    テキスト1
    </div>
    <div>
    <img src="img_1.jpg" alt="">
    テキスト2
    </div>
    <div>
    <img src="img_1.jpg" alt="">
    テキスト3
    </div>
    </div>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません