質問: 下の画像のように 左右にわかれたレイアウトのページをつくりたいです。 img2(right_wrap)のスタート位置を img1(left_wrap)と揃えたいのですが、実際には img2(right_wrap)がTEXTの下部分からスタートしてしまいます。 2つのwrapの高さを揃えたいです。 よろしくお願い致します。 ![イメージ](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/f4b4ff126b10ee76baca048b426ac620.jpeg) ``` TEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXT ``` ``` .left_wrap { float: left; margin-left: 100px; } .works_title img{ width:200px; } .right_wrap { float: right; margin-right: 100px; } .works_title img{ width:200px; } ```
回答: 1.全体のコンテンツ幅を固定+ブラウザセンターに配置 2.コンテンツ内部を左右に二分割する 3.左右カラムの上端の位置を揃える 4.左右カラムの下端の位置は成り行きで良い 上記の条件でレイアウトするのであれば、 ``` /*コンテナ用divで囲む*/ 左カラム 右カラム ``` ``` .container { width: 1000px; /*必要な幅に設定*/ margin: auto; /*ブラウザ中央に配置*/ } .container:after { /*clearfix設定*/ content:""; display:block; clear:both; } .left_wrap { width: 49%; /*左カラム幅設定*/ float: left; /*左にフロート配置*/ } .right_wrap { width: 49%; /*右カラム幅設定*/ float: right; /*右のフロート配置*/ } ``` こんな感じにすればお望みのレイアウトにはなると思います。 条件が変わればコードもまた変わりますのであくまで一例ですが。 基本的にフロートで2段組を作る場合、各カラムにwidthで幅を設定し、 その合計が親要素の幅を超えないようにすることが必須となります。 現状上端の位置が揃わないのは、幅設定が無いために右側がカラム落ちしてしまっているものと思われます。 なお**clearfix**についてはネット上にいくらでも情報がありますので、 何をしているのかはご自分で調べてください。 あと、右カラムのコンテンツがli要素だけ並んでいる形になっていますが、 これはダメです。li要素はul要素またはol要素の中でしか使えませんので、 li要素にulまたはolで親要素を追加してください。