- ベストアンサー
３番目のBoxがずれる理由とは？
- CSSとHTMLで幅などを調整しても、３番目のBoxだけが下にずれる理由を教えてください。
- 二つのBoxではうまく行くのに、３番目のBoxだけがずれてしまうのはなぜでしょうか？
- CSSとHTMLで注意して幅を設定したが、３番目のBoxが下にずれてしまいます。原因を教えてください。
- masarun53406
- お礼率38% (39/101)
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
box2のCSSを少し変更。 #box2{ margin-left: 160; ↓ #box2{ float:left; margin-left: 22;
その他の回答 (2)
- DrFell
- ベストアンサー率55% (305/551)
3番目の……の原因は２番目がfloatしていないからです。それと、ｃｓｓは単位が省略不可です。width:480pxなどと書きましょう。 簡単に説明します。原則として文書は普通、左から右に、上から下に解釈し置いていきます。ブロックレベル要素であるboxnは、ブロックレベル要素であるdivであるため（前後に改行を含む塊）、そのままの解釈にまかせると左から右には流れず、上から下に置いていきます。 masarun53406 さんのソースでは、親要素があり、初めての子要素#box1はfloat:leftしていますので、floatつまり、浮動化します。本来の流れからは切り離されて左に寄ります。 次にbox2はfloat:leftがないと次のボックスは原則どおり下に来るのですが、前の要素が本来の流れから外れているため、box2がbox1のあった場所に入ります。但し、box1が左にいるため、その場所をよけます（水が氷に場所を譲るような感じ）。 masarun53406さんのソースでは、box2はfloatしていませんので、box3は本来の流れ通り、box2の下に来ます。 #1さんの改良案では、#2もfloatしているので、隣に来るわけです。 蛇足ですが、親要素の範囲ないで横に並べたいだけなら、 #mainR1>div{/*ここでひとまとめに*/ float: left; width: 138px; height: 138px; border: dotted 1px #9d9d9d; margin-right:10px; margin-left:10px; } /*以下は別々の指定に*/ #box1{ background-color: #ffcfff; -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; } #box2{ background-color: #ffffff; -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; } #box3{ background-color: #ffcfff; -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; } とすればOKです。floatはその他解除など、込み入ってくるのでしっかり理解しないとつまづきの原因になります。 http://webdesignrecipes.com/css-visual-formating-model/#p5 http://www.kanzaki.com/book/css/3-2.html 等、参考に詳しく学ばれることをお勧めします。
お礼
まだまだ初心者な物で、おっしゃる通りいろいろ現況をしなければなりません。しかしどの資料も読みにくいですね。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
本当に基本的な事ですが、とっても重要な事です。 ★HTMLはデザインに関することは一切書いてはなりません。HTMLには文書構造しか書きません。デザインはスタイルシートで行いますが、その時にHTMLの文書構造を利用しますが、HTMLではデザインのために書かれているわけではないことが大前提です。 ・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) は1999年のHTML4.01の勧告以来、強く叫ばれている事です。 具体的なHTMLとスタイルシートを書いてみます。質問と添付図では文書構造が分かりませんので想像です。(誰--検索エンジンや後任の人--が見ても分かるように) ★その上で、リストの項目をdisplay:blockでblockにして、float:leftで並べてある。 ★スクリーンではリストで表示される。 ★HTML4.01strict + CSS2.1 ★タブは＿に置換してあるので戻す。 ★HTMLには、デザインに関することは何も書いてないので、簡単にかつ自由にデザインできる。 先で全くデザインを変更することも容易 [HTML] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- div.section{ /* 本文(section) */ background-color:lime;padding-bottom:10px; } div.plan{/* planブロック */ width:440px;margin:0 auto; background-color:white; } div.plan:after{ content:"";display:block;clear:left; } div.plan ol,div.plan ol li{/* planブロック内のリスト */ list-style:none;display:block; margin:0;padding:0; } div.plan ol.header li{/* plan内のheaderクラスのol */ border:solid gray 1px; width:180px; float:left; margin:5px;padding:5px; } div.plan ol.header{font-size:0.9em;} div.plan ol.header li p{margin:0 0.5em 0 3em;;font-size:1.1em;} div.plan ol.menue{clear:left;} div.plan ol.menue>li{ width:138px;height:138px;margin:2px; float:left; background-color: #ffcfff; border:dotted 1px #9d9d9d; } /* 以下ひとコマごとに色分けCSS3を使うともっと簡単 */ div.plan ol.menue>li+li{background-color:silver;} div.plan ol.menue>li+li+li{background-color:#ffcfff;} div.plan ol.menue>li+li+li+li{background-color:silver;} div.plan ol.menue>li+li+li+li+li{background-color:#ffcfff;} div.plan ol.menue ol{margin:5px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>計画書</h2> ＿＿<div class="plan"> ＿＿＿<ol class="header"> ＿＿＿＿<li>年月日 ＿＿＿＿＿<p>平成25年8月1日</p> ＿＿＿＿</li> ＿＿＿＿<li>担当者 ＿＿＿＿＿<p>山田太郎</p> ＿＿＿＿</li> ＿＿＿</ol> ＿＿＿<ol class="menue"> ＿＿＿＿<li> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li>8月1日</li> ＿＿＿＿＿＿<li>全体会議</li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li>8月2日</li> ＿＿＿＿＿＿<li>試験</li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li>8月3日</li> ＿＿＿＿＿＿<li>実技試験</li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li>8月4日</li> ＿＿＿＿＿＿<li>増減可能</li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
すばやいご指摘 ありがとうございます。 右からしか考えていませんでした。