innerからの脱獄
innerとはなんぞ
Webサイトでよく使われるinnerは横幅が1920とか4kとかある大型ディスプレイでサイトを開いてもページが横にびろーんと伸びすぎないようにするためのものです。
名前はwrapとかcontainer等のバリエーションもありますが目的は同じです。
.inner {
width: 980px;
margin: 0 auto;
}
幅はサイトによってまちまちですがだいたいこんな感じのことが書いてあります。
どうすればいいのか
元の状態
See the Pen
BaNjaZe by sphenisc (@sphenisc)
on CodePen.
例えば「これをinnerの外にはみ出させたい」の部分をinnerから出して幅1200pxで表示したいとします。
しかし普通に幅1200px ＆ margin:0 auto;を指定すると右にだけはみ出すので以下のようにします。
See the Pen GRJoRvz by sphenisc (@sphenisc) on CodePen.
margin: 0 calc((980px - 1200px)/2);
の部分がわかりにくいと思いますが左右に 1200pxと980pxの差の半分である110pxのマイナスマージンをとっています。
Author And Source
この問題について(innerからの脱獄), 我々は、より多くの情報をここで見つけました https://qiita.com/spenic635/items/ebf84a39201123b06668著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .