A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
重なるのが嫌なら、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>
No.1
- 回答日時:
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
│定││ 定 ││定↓
│↓││ ↓ ││↓│
└─┘└───┘└─┘
別の状況でしたら、文書構造を分かるように指示してください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript 指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードを教えてください 2 2023/04/27 17:58
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
- その他(プログラミング・Web制作) pythonでのカーソル移動がずれる 2 2023/07/30 08:51
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- Visual Basic(VBA) Selenium Basicの件 5 2023/04/10 20:55
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
このQ&Aを見た人はこんなQ&Aも見ています
-
賃貸で可能な古民家風レトロな部屋作りのコツ!改めて知る畳の高い機能性と魅力も紹介
畳の部屋を雰囲気のよい部屋に仕上げたい!賃貸住宅でもできる古民家風のレトロな部屋作りのコツを伺った。
-
divタグ内のコンテンツが重なって表示されてしまう。
HTML・CSS
-
htmlの文字が縦書きになる
HTML・CSS
-
画像と文字が重なって表示される。
HTML・CSS
-
-
4
Javascript_submit()完了後に処理したい
JavaScript
-
5
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
6
Excelで"で囲む方法
Excel(エクセル)
-
7
テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
HTML・CSS
-
8
Winmerge ファイルの中身は同じなのに黄色くなる
その他(OS)
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ヘッダーとフッターだけ背景を...
-
HTML属性での「""」 「''」違い
-
1時間30分を簡単に表したいで...
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
min-heightとheightの違いについて
-
3カラムレイアウトで「常に残り...
-
hタグの右横に画像を表示
-
1サイト内にHTML5とXHTMLが混在...
-
divの中に外部のHTMLを埋め込む
-
画面を縮小するとカラムが落ち...
-
スペースを使わず文字位置を揃...
-
複数のボタンを等間隔に、かつ...
-
SSIを利用してCSSレイアウトを...
-
hタグを使わずに小見出し
-
htmlの見出しタグ(<h1>)の次...
-
<div id="container">の使いか...
-
WEBデザイン ― ブラウザの横幅...
-
CSS: divタグ内のリンク表示に...
-
HTML5コメント欄の<article>に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
おすすめ情報