containerの片方だけ100%に広げて外側に出したい。

Question

前提・実現したいこと

図のようにしたいのですが、なかなかなってくれません。
calcを使って指定するのでしょうか？？（ ; ; ）

試したこと

<div class="top-works">
   <div class="container">
		
   </div>
</div>

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 80px 20px;
}

試したこと

widthをvwにしたりしたのですが、そうすると画面幅によって収縮してしまうため、containerの内側にきてしまったり、外側に出てしまったりしてしまいます。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[think49]

親要素を3分割して、padding で隙間を作れば簡単に出来そうですが…。
あるいは、親要素のpadding: にして、子要素のmarginで整えても良さそうですね。

[UKYO9311]

kei344様
コードを追加いたしました。ご指摘ありがとうございます！(>_<)

think49様
コメントありがとうございます！！えーと、それはcalcを使って関数で計算するということでしょうか？？？

[think49]

calcは不要です。
ブロックボックスは初期状態で画面横幅の最大幅をとるよう調整されています。
padding, margin で余白をとれば、目的の挙動になります。

[yoshinavi]

上手くいかない現状のコードを提示してください。
図では、3つのBox要素がありますが、提示では1つのみです。このままだと「コード欲しい」の「丸投げ」と捉えられる可能性があります。

[UKYO9311]

コメントありがとうございます！！失礼いたしました。画像を修正いたしました。右側に広がるタイプで困っております。

Answer 1

calcを使って指定するのでしょうか

画面幅1220px以上の場合、((100vw - 1180px) / 2)が左/右の幅になるので、marginで配置すれば出来ると思います。画面幅1220px以下の場合、左/右の幅は20pxなので特に計算する必要は無いです。

Comments

[UKYO9311]

ご回答本当にありがとうございます！！（ ; ; ）
先ほどmargin: calc((100vw - 1180px) / 2);を.containerに指定してみたのですが、横幅いっぱいに広がってしまいました。。。(>_<)

[kei344]

marginは右左個別に設定できますよ。

[UKYO9311]

margin-leftで指定したらできました！！！ご丁寧にありがとうございました。（ ; ; ）