左右に分けたレイアウトのページをつくりたい

下の画像のように
左右にわかれたレイアウトのページをつくりたいです。

img2(right_wrap)のスタート位置を
img1(left_wrap)と揃えたいのですが、実際には
img2(right_wrap)がTEXTの下部分からスタートしてしまいます。

2つのwrapの高さを揃えたいです。
よろしくお願い致します。

lang
1<div class="left_wrap">
2    <img src="img1.jpg">
3    <p>
4        TEXTTEXTTEXTTEXTTEXT<br>
5        TEXTTEXTTEXTTEXTTEXT<br>
6        TEXTTEXTTEXTTEXTTEXT<br>
7    </p>
8</div>
9
10<div class="right_wrap">
11        <li><img src="img2.jpg"></li>
12        <li><img src="img2.jpg"></li>
13        <li><img src="img2.jpg"></li>
14        <li><img src="img2.jpg"></li>
15</div>
16
17

lang
1
2.left_wrap {
3		float: left;
4		margin-left: 100px;
5	}
6	    .works_title img{
7		    width:200px;
8	    }
9
10.right_wrap {
11		float: right;
12		margin-right: 100px;
13	}
14	    .works_title img{
15		    width:200px;
16	    }
17
18

takito

2016/06/29 08:16

HTMLのdivタグに記述されているクラス名が、CSSで記述されているクラス名のどれとも一致してしないですが、実際のソースと異なっているでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

１．全体のコンテンツ幅を固定＋ブラウザセンターに配置
２．コンテンツ内部を左右に二分割する
3.左右カラムの上端の位置を揃える
4.左右カラムの下端の位置は成り行きで良い

上記の条件でレイアウトするのであれば、

HTML
1<div class="container"> /*コンテナ用divで囲む*/
2 <div class="left_wrap">
3   左カラム
4 </div>
5 <div class="right_wrap">
6 右カラム
7 </div>
8</div>

CSS
1.container {
2  width: 1000px; /*必要な幅に設定*/
3  margin: auto; /*ブラウザ中央に配置*/
4}
5.container:after { /*clearfix設定*/
6  content:"";
7  display:block;
8  clear:both;
9}
10.left_wrap {
11  width: 49%; /*左カラム幅設定*/
12  float: left; /*左にフロート配置*/
13}
14.right_wrap {
15  width: 49%; /*右カラム幅設定*/
16  float: right; /*右のフロート配置*/
17}

こんな感じにすればお望みのレイアウトにはなると思います。
条件が変わればコードもまた変わりますのであくまで一例ですが。
基本的にフロートで２段組を作る場合、各カラムにwidthで幅を設定し、
その合計が親要素の幅を超えないようにすることが必須となります。
現状上端の位置が揃わないのは、幅設定が無いために右側がカラム落ちしてしまっているものと思われます。

なおclearfixについてはネット上にいくらでも情報がありますので、
何をしているのかはご自分で調べてください。

あと、右カラムのコンテンツがli要素だけ並んでいる形になっていますが、
これはダメです。li要素はul要素またはol要素の中でしか使えませんので、
li要素にulまたはolで親要素を追加してください。

投稿2016/06/29 10:02