More than 5 years have passed since last update.

SCSSを使って要素を横並びにする方法

Last updated at 2019-05-23Posted at 2019-05-20

##やりたいこと
図の変更後のようにtableを横並びにしたい。

####変更前

####変更後

##手順
####① wrapper1に display: inline-block; を適用させる。

wrapper1 {
  display: inline-block;
}

####②全体の横幅を100%とした時、wrapper1とwrapper2を相対的に評価して幅を決める。
例）wrapper1 : wrapper2 = 3 : 7　にする
　　wrapper1 の width: 30%;
　　wrapper2 の width: 70%;

wrapper1 {
  display: inline-block;
  width: 30%;
}

wrapper2 {
 width: 70%;
}

####③ wrapper2に float: right;を適用させる。
これを適用させることで、wrapper1の横に, wrapperにが潜り込む。

wrapper1 {
  display: inline-block;
  width: 30%;
}

wrapper2 {
 width: 70%;
 float: right;
}