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

Question

clab_yasu

25

23もっと見る

60pt

ウェブ制作

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

下記のようなテーブルと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回まで

登録：2010/05/28 10:34:51
終了：2010/05/28 11:09:32

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

Mars 2010/05/28 11:13:38

ちょっと構成が安易だったのでもう１サンプルだけ。
<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="">
テキスト１
</div>
<div>
<img src="img_1.jpg" alt="">
テキスト２
</div>
<div>
<img src="img_1.jpg" alt="">
テキスト３
</div>
</div>

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

Mars · Answer 1 · 2010-05-28T10:54:20+09:00

サンプルです。

（互換モードの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>テキスト１</div>
<div>テキスト２</div>
<div>テキスト３</div>
</div>

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

回答（1件）

Mars203202010/05/28 10:54:20

コメント（1件)

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