Q&A
ご回答ありがとうございます。
margin: 0 calc(-10% / 0.8)
こちらの値がどのように出てきたのか、とても気になります。
よければ教えて頂けないでしょうか？
コンテナ2を画面の両端に隙間なく表示したいです。
出来ればwrapperクラスにpaddingを残したままがいいです。
何か方法はありますでしょうか？
よろしくお願いします。
html
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 <link rel="stylesheet" href="../css/html5reset-1.6.1.css" /> 9 <link rel="stylesheet" href="../css/all.min.css" /> 10 <link rel="stylesheet" href="../css/style.css" /> 11 </head> 12 <body> 13 <div class="wrapper"> 14 <div class="container">コンテナ1</div> 15 <div class="container"> 16 コンテナ2(画面両端にしたい) 17 </div> 18 <div class="container">コンテナ3</div> 19 <div class="container">コンテナ4</div> 20 <div class="container">コンテナ5</div> 21 <div class="container">コンテナ6</div> 22 </div> 23 </body> 24</html>
css
1.wrapper { 2 padding: 0 10%; 3} 4.container { 5 height: 50px; 6 line-height: 50px; 7 text-align: center; 8} 9.container:nth-child(even) { 10 background-color: lightgreen; 11} 12.container:nth-child(odd) { 13 background-color: lightcoral; 14} 15 16 17// absoluteだと下の要素が上に詰まってしまう 18// .container:nth-child(2) { 19// position: absolute; 20// left: 0; 21// right: 0; 22// width: 100%; 23// }
回答2件
0
CSS
1.wrapper > .container:nth-child(2) { 2 margin: 0 calc(50% - 50vw); 3}
投稿2021/11/20 01:37
総合スコア103
0
ベストアンサー
ネガティブマージンをつけるとかはどうですか？
css
1.container:nth-child(2) { 2 margin: 0 calc(-10% / 0.8); 3 width: calc(100% / 0.8); 4}
投稿2021/11/20 01:32
総合スコア36163
margin: 0 calc((-100% / 0.8 + 100%) / 2);
このようにしたら同じように出来ました。
ありがとうございます！
お役に立てたようで何よりです
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。