- 締切済み
CSSで作ったテーブルのレイアウトが崩れ困っています
テーブルで作成内容をCSSで作成中ですが勉強不足でレイアウトが崩れてしまいます。 テーブルの指定内容を以下のCSSに置き換えています table→dn2 tr→d0 td→d1・d11・d12・d2・d3 ２文字目が列の順番です d3（最後の列）は、float:leftの指定が無いのに回り込むように表示されてしまいます。 以下のように記述しています 下の改行後の内容のように表示したいのですが <html><head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css;"> <style type="text/css"><!-- .dn2 {position:static;font:17px/48px serif;width:477px;} .d0 {position:static;} .d1 {margin-left:17px;width:189px;vertical-align:text-top;font:17px/48px serif;float:left;} .d11 {margin-left:34px;width:17px;vertical-align:text-top;font:17px/24px serif;float:left;} .d12 {width:154px;vertical-align:text-top;float:left;} .d2 {width:99px;font:17px/24px serif;vertical-align:text-top;float:left;} .d3 {width:162px;font:17px/48px serif;vertical-align:text-top;} .p08 {font:13px/15px serif;} .p14n {font:17px/18px serif;} .mb18 {margin-bottom:15px;} --></style></head> <body><div class="dn2"> <div class="d0"><div class="d1"><div class="p08">姥ケ谷</div><div class="p14n"> 下田弐拾八歩</div></div> <div class="d2">拾壱間<br>弐間半</div> <div class="d3"><div class="p08">南沼上村</div><div class="p14n"> 伊左衛門</div></div></div> <div class="d0"><div class="d11">下<br>下</div> <div class="d12">田廿三歩</div> <div class="d2">四間半<br>五間</div> <div class="d3"><div class="p08">川合村</div><div class="p14n">長三郎</div></div></div> <div class="d0"><div class="d1"> 下畑拾六歩</div> <div class="d2">四間<br>四間</div> <div class="d3"> 同 人</div></div><br> <!-- 以下の内容のように表示したいのですが--> <div class="d0"><div class="d11">下<br>下</div> <div class="d12">畑六歩</div> <div class="d2">四間<br>壱間半</div> <div class="d3"><div class="p08">同村</div><div class="p14n">曽右衛門</div></div></div> <div class="d0"><div class="d1"> 下畑拾五歩</div> <div class="d2">五間<br>三間</div> <div class="d3"> 同 人</div></div></div> </body></html> ie7 バージョン7.0.5730.11です 宜しくお願いします。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
>>floatでrightとleftが混在している場合で >>正しく縦方向で区切るにはやっぱりclear:bothが必要だった >float left しか使用していません よく見て。質問者のソースの話はしていない。 そういう描画をする場合の話をしているだけ。 >４・５行は、正しく表示されています 右側に残った空間に描画しようとするのでそうなるかもしれない 試しに 表示される文字の幅が変わるように増減したらどうなるか試してみて欲しい。(プロポーショナルは空白と文字では幅が極端に変わる場合有り) ・・・でもこの試験で思ったとおりなったとしても疑問が解決できないね・・・
ごめん 位置を勘違いしてた。 d0にclear:bothが要るのではなくd3とd0の間に要る。 あまり詳しく調べてないので詳しくは判らないけれどfloatでrightとleftが混在している場合で正しく縦方向で区切るにはやっぱりclear:bothが必要だったのでその辺りが関係あるのかも。(省略時の解釈によるものかも) 感じとしては以下のような物だと認識したら良いと思う。 <div class="d3" /><div style="clear:both" /><div class="d0" /> ↓ <span><!-- d3 --></span><br /><span><!-- d0 --></span>
d2とd3を並べたくないのなら clear:both が間に必要
お礼
回答ありがとうございます ＞d2とd3を並べたくないのなら clear:both が間に必要 d3と次行のd1が並んで表示されています。 質問内容でも記述しましたが d3（最後の列）は、float:leftの指定が無いのに 次行のd1の内容が 回り込むように表示されてしまいます。 d0にclear:both指定すれば、正常に表示しますが d3にfloat:leftの指定が無いのに なぜd0にclear:both指定をするの ご存知方いたら教えて下さい
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
再度の回答ありがとうございます ＞d0にclear:bothが要るのではなくd3とd0の間に要る。 記述すると下記の用ですか <div style="clear:both"><<div class="d0"><div class="d1"> ＞floatでrightとleftが混在している場合で正しく縦方向で区切るにはやっぱりclear:bothが必要だったのでその辺りが関係あるのかも。 float left しか使用していません 質問内容でも記述しましたが d3（最後の列）は、float:leftの指定が無いのに 次行のd1の内容が 回り込むように表示されてしまいます。 ２・３行と４・５行は、内容が似ていますが ４・５行は、正しく表示されています。 ご存知方いたら教えて下さい