LoginSignup
3

More than 5 years have passed since last update.

HTML,CSS勉強メモ #13 〜画像付きリストが横にならずにハマる〜

Last updated at Posted at 2016-04-08

前回からずっとハマっています・・・

進度

mainの画像付きリストを横並びにしたい

レッスン内では画像付きリストは縦に並べ、説明をその横に付ける形になっているが、 これを画像を横並びにして、説明をその下に付けたい。

メモ


ハマってるその1

とりあえずlifloat;left;をつけてみたけど、横並びにならない。

ハマってるその2

cssを最初から見直し、widthを%で指定しているところをPXに直す。
  • そもそもなぜ%で指定したのか
    • 伸縮させてもmain-containerの中央配置を維持させようとしたからです。 最初PXで指定したところ、伸縮に合わせてついてきてしまったので%で指定していました。
    • 上記の改善
main-conteiner{position: absolute;             
               top:0;
               bottom:0;
               right:0;
               left:0;
               margin: auto;
}

これで常に中央配置を保てる技を見つけました。

  • menuの幅を%からPXにしたところ、中央配置が崩れた。
    • 今ここです。

ひとまず頭の中整理させるために一度メモっときます。
*ちなみに書きながら最初の画像付きリストについて、もしかしてlifloatつけたのがいけなかったのでは?と思い、試しにli>imgに付けてみたところ効きました。
しかしレイアウトはだだ崩れなのでmenuの問題が解決したら考えてみようと思います。
結局widthの指定の仕方は関係なかったってことですね・・・

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3