画面幅が変わっても左側はいっぱいに右側に余白を取る、右側は画面幅が変わっても上の要素1080pxと揃えたい。
このようなことは可能でしょうか?
説明しづらいので画像でご確認ください。
宜しくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
自己解決
擬似要素を使い背景色を作ることで自己解決に至りました。
投稿&考えていただき、ありがとうございました。
.haikei{ width:1080px; margin:0 auto; background: #F9F8F7; position: relative; &::before{ content: ""; position: absolute; left:-1000px; width:1000px; height:500px; background: #F9F8F7; } } コード
投稿2021/02/19 08:01
総合スコア11
0
こんな感じでしょうか。
html
1<div class="wrapContent"> 2 <div class="redbox"> 3 width 1080px 4 </div> 5 <div class="bluebox"> 6 <ul> 7 <li>テキスト</li> 8 <li>テキスト</li> 9 <li>テキスト</li> 10 </ul> 11 </div> 12</div>
css
1body { 2 margin: 0; 3} 4* { 5 box-sizing: border-box; 6} 7.redbox { 8 max-width: 1080px; 9 text-align: center; 10 color: white; 11 padding: 50px; 12 background-color: red; 13 margin: 50px 100px 50px auto 14} 15.bluebox { 16 background-color: blue; 17 margin: 0 100px 50px 0; 18} 19.bluebox > ul { 20 list-style: none; 21 max-width: 1080px; 22 padding: 50px; 23 margin: 0 0 0 auto; 24 display: flex; 25 justify-content: space-around; 26} 27.bluebox > ul > li { 28 background-color: black; 29 color: white; 30 width: 25%; 31 padding: 50px; 32}
投稿2021/02/19 01:38
総合スコア34075
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
html
1 2<div class="wrapContent"> 3 <div class="content"> 4 <ul> 5 <li>テキスト</li> 6 <li>テキスト</li> 7 <li>テキスト</li> 8 </ul> 9 </div> 10</div>
css
1.wrapContent{ 2text-align:right; 3background:blue; 4} 5.content { 6display:inline-block; 7text-align:center; 8width:1080px; 9} 10
これでどうでしょうか。
投稿2021/02/18 12:49
編集2021/02/18 12:52総合スコア17
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。