Q&A
前提・実現したいこと
section同士を横2列に並べたいです。
ただし、そのsectionの親はdivやarticleやmainでwrapしていないので、section以下の要素に対するCSSで横2列並びにしたいです。
動作デモ(CodeSandBox)
上記デモで言うと、2つ目のセクション以降を横2列にしたいです。
また、2つ目以降のsectionの背景を左は白、右は灰色にしたいです
発生している問題・エラーメッセージ
横2列にできていません。
2つ目以降のsectionの背景が、全て灰色になっています。
該当のソースコード
html
1<body> 2 <section> 3 <h1>ページタイトル</h1> 4 <p> 5 ページタイトルページタイトルページタイトルページタイトルページタイトル 6 </p> 7 <p> 8 ページタイトルページタイトルページタイトルページタイトルページタイトル 9 </p> 10 </section> 11 <div> 12 <p>テキストテキストテキストテキスト</p> 13 <p>テキストテキストテキストテキスト</p> 14 </div> 15 <section> 16 <h2>セクション1</h2> 17 <p>セクションセクションセクションセクション</p> 18 <p>セクションセクションセクションセクション</p> 19 <p>セクションセクションセクションセクション</p> 20 <p>セクションセクションセクションセクション</p> 21 <p>セクションセクションセクションセクション</p> 22 </section> 23 <section> 24 <h2>セクション2</h2> 25 <p>セクションセクションセクションセクション</p> 26 <p>セクションセクションセクションセクション</p> 27 <p>セクションセクションセクションセクション</p> 28 <p>セクションセクションセクションセクション</p> 29 <p>セクションセクションセクションセクション</p> 30 </section> 31 <section> 32 <h2>セクション3</h2> 33 <p>セクションセクションセクションセクション</p> 34 <p>セクションセクションセクションセクション</p> 35 <p>セクションセクションセクションセクション</p> 36 <p>セクションセクションセクションセクション</p> 37 <p>セクションセクションセクションセクション</p> 38 </section> 39 <section> 40 <h2>セクション4</h2> 41 <p>セクションセクションセクションセクション</p> 42 <p>セクションセクションセクションセクション</p> 43 <p>セクションセクションセクションセクション</p> 44 <p>セクションセクションセクションセクション</p> 45 <p>セクションセクションセクションセクション</p> 46 </section> 47 </body>
css
1* { 2 box-sizing: border-box; 3} 4 5h1, 6body, 7h2, 8p { 9 margin: 0; 10} 11 12section { 13 padding: 2rem 1rem; 14} 15 16div { 17 padding: 1rem; 18 margin-bottom: 1rem; 19} 20 21div ~ section { 22 width: 50%; 23} 24 25div ~ section:nth-of-type(even) { 26 float: left; 27} 28 29div ~ section:nth-of-type(odd) { 30 background: lightgray; 31}
試したこと
floatの代わりに、2つ目以降のsectionすべてにdisplay: inline-blockを設定してみましたが、横並びになりませんでした。
回答1件
0
なぜラップしないのでしょうか？
構造的に制御できないなら限界があると思います
とりあえずでいいなら以下試してみてください
css
1div ~ section:nth-of-type(odd) { 2 float: right; 3}
投稿2021/08/18 04:27
総合スコア116724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。