div要素が重なってします

締切済

質問者：dragon_
質問日時：2015/02/28 22:38
回答数：2件

div要素を左右交互に配置していくと重なってしまいます。
どうしたらよいでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： Dr.Fell
回答日時：2015/03/01 22:10

重なるのが嫌なら、floatにすればいい。

そうすれば、重なる状況では下に落っこちる。

どうしたら？ではなく、どうしたいのかです。なぜ重なるのかは、左右の幅が合計で親要素の100%を越えているからではないかと推察します。計算してみてください。

左右の幅がmarginとwidth+border+paddingの合計の値が親要素の100%以下になっていますか？
または、
box-sizing: border-box;の指定をし、marginとwidthの合計の値が親要素の100%以下になっていますか？

どうしたらよいのでしょうかって、私は重なっても困らないので、そのままでもいいのでは？と思います。dragon_さんが、どうしたいの？サイズを小さくしてでも重ならないようにしたいのか、大きさはそのままで別のデザインにしたいのか？

以下は幅50%のdiv要素を左右交互に配置した例です。50%が2つなので、100%です。

<style type="text/css">
div{
width:50%;
box-sizing: border-box;
float:right;
margin:0;
padding:1em;
background:#ffdddd;
border:1px solid #ffffff;
}
div:nth-child(odd){
float:left;
background:#ccffff;
}
</style>
</head>

<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2015/03/01 09:50

DIVでは分かりません。

大原則なので御存知だと思いますが、DIVは『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』のものでデザインのために使用するものではありません。HTML5では、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Grouping content — HTML5( http://www.w3.org/TR/2014/REC-html5-20141028/gro … )］より
翻訳すると「注意：著者には、他に適切な要素がない時の最後の最後の手段としてDIV要素を使用することが強く推奨される。DIVでないより適切な要素を使用する事は、読者にはより良いアクセシビリティを著者にはメンテナンス性の向上につながる。」

　DIVでは分からないので、私の経験からその質問に該当する事象として次の場面が思い浮かびます。

　HTML5で表現すると、多分次のような場面だと思われます。
<body>
　<header>文書のヘッダ</header>
　<section>主文
　　<section>
　　　項目記事
　　　<nav>ナビゲーション目次</nav>
　　　<aside>このsectionと直接関係ない記事</aside>
　　</section>
　　<section>
　　　項目記事
　　　<nav>ナビゲーション目次</nav>
　　　<aside>このsectionと直接関係ない記事</aside>
　　</section>
・・・・・
　</section>
　<footer>この文書のフッタ</footer>
</body>
★HTMK5未満の場合は、<section></section>は<div class="section"></div>となっていたところです。

　とすると、この質問は
「sectionごとのナビゲーションと関連記事を、そのsectionの右左に配置したいが、sectionが短い時に重なってしまう。それを重ならないようにしたい」
(対策)
1.左右に配置されるコンテンツの高さが分かっている場合、それが属するsectionのmin-heightを指定する。
┌─┐┌───┐┌─┐
│↑││　↑　││↑│
│固││min-　││固│
│定││height││定│
│↓││　↓　││↓│
└─┘└───┘└─┘
2.左右に配置されるコンテンツの高さが未定の場合は、overflow:autoなどでスクロールを提供する。
になるでしょう。
┌─┐┌───┐┌─┐
│↑││　↑　││↑↑
│未││　未　││未scroll
│定││　定　││定↓
│↓││　↓　││↓│
└─┘└───┘└─┘

　別の状況でしたら、文書構造を分かるように指示してください。

- 1
- 件

通報する

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

質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

今、見られている記事はコレ!

隣の枝がはみ出してきたら切ってもいい？最もやってはいけないことは？

「隣の木が越境してきて困るが、勝手に切ってはいけないと聞くし…」そう思っている方も多いだろう。実は、2023年4月1日に民法が改正され、この「越境枝」のルールが大きく変わった。教えて！gooでも「境界から出て...
弁護士が解説！あなたの声を行政に届ける「パブリックコメント」制度のすべて

社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」

「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
釣りと密漁の違いは？知らなかったでは済まされない？事前にできることは？

知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
カスハラとクレームの違いは？カスハラの法的責任は？企業がとるべき対応は？

東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。この動きは自治体...