画像を参照願えますでしょうか。
左側100pxの右側は400pxで合計幅500pxあります。
(右側1行左側3行です。)

これをテーブルレイアウトではなく、divとcssで書くとどんなhtmlになりますか?

現在段組を色々やってますが、自問自答してもこのパターンだけが解決できないので・・・

同じようにHTMLに興味ある方や詳しい方がいらっしゃいましたらご教授願います。

お答えの際にはHTMLソースを希望します。

「このテーブルをCSSで書くとどうなります」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (4件)

padding等の細かい点は省きます。



【左側のボックス】
  ▼css
   .left{
   width:100px;
   float:left;
   }
【右側のボックス】
  ▼css
   .right{
   width:400px;
   float:right;
   }
【左右を囲うもの】
  ▼css
   .main{
   width:500px;
   margin:0px auto;
   }
【html】
  <div class="main">
<div class="left">~~~~~</div>
  <div class="right">~~~~~</div>
  <div class="right">~~~~~</div>
  <div class="right">~~~~~</div>
</div>

上記では駄目ですか?
検証はしていません。
    • good
    • 0
この回答へのお礼

ありがとうございます^^

お礼日時:2009/05/25 13:26

IEなら


<STYLE TYPE="text/css"><!--
.left{
width:100px;
float:left;height:3.6em;
border-style:solid;border-color:black;border-width:1px;}
.right{
width:400px;
float:left;
border-right:1px solid windowtext;
border-bottom:solid black 1px;}
.main{
width:503px;
}
.xl05 {border-top:1px solid Black;}
-->
</STYLE></HEAD><BODY><div class="main">
<div class="left">aaaaaa</div>
<div class="right xl05">bbbbbbbbbbbbb</div>
<div class="right">ccccccccccccccc</div>
<div class="right">dddddddddddddddd</div>
</div>
</BODY></HTML>

Firefox・Safariの場合500では、floatが利かないので503にしています

height:3.6em;を指定していますが、FirefoxとSafari個々にCSSを指定が必要ですので。
Firefoxの場合は、height:3.8em;??
Safariの場合は、height:3em;??

rowspan="3"等、セルの結合する場合、table指定で作成した方が良いと思いますが
    • good
    • 0
この回答へのお礼

ありがとうございます^^
早速ソースを貼ってみたらうまくでできました!

しかし・・・「Firefox・Safariの場合500では、floatが利かないので503にしています」の部分がちょっと初めて聞いたので理解できませんでしたが≧≦

うれしいです。

お礼日時:2009/05/26 04:15

<div>


 <div>左</div>
 <div>右上</div>
 <div>右中</div>
 <div>右下</div>
 <div>clearfix的なもの</div>
</div>
というHTMLを仮定して、
全体を囲っているdivにwidth:500px;、左にwidth:100pxですね。
左にfloat:left;、clearfixにclear:left;
全体を囲うdivにheightを指定して、左にheight:100%;
clearfixには、height:0;margin:0;font-size:0;line-height:0;visibility:hidden;とあらゆる手を使って存在をなくす。

とかって感じで如何でしょう。
右と左の高さを合わせるにはこれもきっちりheightをサイズ指定して、
あとはoverflow:auto;とでもしておけば何とかなるんじゃないでしょうか。
    • good
    • 0
この回答へのお礼

よくわかりません・・・

わたしの頭が悪いんですね><

でもありがとうございます^-^

お礼日時:2009/05/26 04:16

こんな感じでしょうか?





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<style type="text/css">
<!--
#a{width: 100px;}
#b{width: 400px;}
//-->
</style>
</head>
<body>
<table border="1">
<tr><td rowspan="3" id="a">あいうえお</td><td id="b">かきくけこ</td></tr>
<tr><td>さしすせそ</td></tr>
<tr><td>たちつてと</td></tr>
</table>

</body>
</html>

この回答への補足

説明がヘタですいません。

div+cssでお願いします。

要するにテーブルレイアウトのタグは使用しないで書くということです。

補足日時:2009/05/25 13:26
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング