人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

スタイルシートを使って横幅が均等に伸縮する方法について教えてください。
下記のようなテーブルと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>

●質問者: clab_yasu
●カテゴリ:ウェブ制作
✍キーワード:3分 CSS スタイルシート ズバリ ソース
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Mars
●60ポイント

サンプルです。

(互換モードの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>

◎質問者からの返答

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

勉強になりました!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ