javascriptで座標を指定して配置している可能性はないでしょうか?
Like!
webサイトの要素の配置の仕方が理解できません。
https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1572917376_Zjk1MzU0NmY1ZDZm
このサイトのheaderの左、右の部分の配置の仕方が理解できません。
class="_1q8eoff"と"_ja3rf6"の配置の仕方がわかりません。
なぜ、"_1sczr6v"（アイコン）と間が空いているんですか？
position:absolute;はありますが、left:50%;だけしか指定されていません。
なぜ、上に200pxの空間があるのか理解できません。
考え方や、何か見逃しているポイントがありましたらご指摘いただけると幸いです。
0
4Answer
0
Comments
@aki_blog
Questioner回答ありがとうございます。
よく見たら、上下の余白が同じだったので、
親要素にdisplay:flex; align-items:center; を指定したら、同じように配置できました！
専門ではないのですが、
ラップしているdiv._1kyvrouにheightが指定されていますね。
それを解除すると約200pxの空間が無くなります。
<div class="_1kyvrou" id="FMP-target">
<div class="_1sczr6v">...</div>
<div class="_1q8eoff">...</div>
<div class="_ja3rf6">...</div>
</div>
Like!
Comments
@aki_blog
Questioner回答ありがとうございます。
@blue32aさんの言う通り、上下とも204pxの余白だったので、
親要素にdisplay:flex; align-items:center; を指定したら、同じように配置できました！
よく見たら、上下の余白が同じだったので、
親要素にdisplay:flex; align-items:center; を指定したら、同じように配置できました！
Like!
._1kyvrou {
height: 768px;
position: relative;
/* 省略 */
}
._1sczr6v {
position: absolute;
top: 24px;
left: 24px;
}
親コンテナー._1kyvrouにheightを設定し、子コンテナにtop:24pxとleft:24pxの位置を指定していますので、右上に表示されました。なので、その上に200pxの空間が出てきました、200pxは特に指定していませんでした。
簡単に参照できるようにCodepenのpenでCSSセレクタをネストしました。良かったら、そこのコードをいじって表示の結果を確認してみてください。 :)
Like!