質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

3回答

10042閲覧

兄弟要素で、左に3段右に1段のレイアウトは実現可能でしょうか

nae_stage

総合スコア274

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2016/11/30 09:10

以下の図のようなレイアウトにしたいのですが、
要素A~Dを兄弟要素だけで実現することは可能でしょうか?
(左の要素A~Dを更に別の要素で囲む、ということは無しで)
具体的なHTMLは図の下に記載します。
よろしくお願いします。
実現したいレイアウト

HTML

1<div class="parent"> 2 <div class="yousoA">要素A</div> 3 <div class="yousoB">要素B</div> 4 <div class="yousoC">要素C</div> 5 <div class="yousoD">要素D</div> 6<div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

CSS

1.parent { 2 position: relative; 3 width: 90%; 4} 5.parent > div { 6 width: 50%; 7} 8.parent > div:not(.yousoD) { 9 height: 3em; 10} 11.yousoD { 12 position: absolute; 13 top: 0; 14 right: 0; 15 bottom: 0; 16} 17.yousoA { background-color: #e89; } 18.yousoB { background-color: #8e9; } 19.yousoC { background-color: #89e; } 20.yousoD { background-color: red; } 21```**動くサンプル:**[https://jsfiddle.net/g4xoevkp/](https://jsfiddle.net/g4xoevkp/)

投稿2016/11/30 09:21

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

position:でガチガチに組んでしまう」という回答を別にして、試しに作ってみましたが、Aだけ右側のものは作れました

Dでないといけない、となると別な考えが必要かもしれません。

投稿2016/11/30 09:18

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こんなのも参考までに…

HTML

1<div id="box"> 2 <dl> 3 <dd> 4 <ul> 5 <li>要素A</li> 6 <li>要素B</li> 7 <li>要素C</li> 8 </ul> 9 </dd> 10 <dt>要素D</dt> 11 </dl> 12</div>

CSS

1#box dl { 2 width:100%; 3} 4#box dl dt { 5 float:right; 6 width:50%; 7} 8#box dl dd { 9 float:left; 10 width:50%; 11} 12#box dl dd ul { 13 list-style-type:none; 14} 15#box dl dd ul li:nth-child(1) {要素A用} 16#box dl dd ul li:nth-child(2) {要素B用} 17#box dl dd ul li:nth-child(3) {要素C用}

要素Dが一番大きなことから、画像、あるいはタイトル的なものが入ると推測。
ですが、<dt>の中に入れられるのは、img/strong/em/span 等しかないので、
それ以外の用途に使いたい場合は、使えません…

投稿2016/11/30 10:50

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問