画像を横向きに並べ、各画像の下に文字を記載したいと思っています。現在だと、画像が2枚ごとにしか横に並べられていない上にそれぞれの間隔が広すぎます。3枚横並べで、5~10pxずつ間隔を広げたいです。

Question

<div id="like">
//////省略

	<div id="wrap">
		<div class="content">
			<div class="main-center">
				<h1>What I LOVE</h1>
				
				<div class="like_box"><h4>水泳</h4>
						 <img src="./images///.png" alt="水泳" height="200px" width="200px" >

				</div>

				<div class="like-box"><h4>体操</h4>
                    <img src="./images///.jpg" alt="体操" width="200px" height="200">
                </div>

                <div class="like_box"><h4>テニス</h4>
                	<img src="./images///.jpg" alt="テニス" width="200px" height="200">
                </div>
		
	        </div>
	     </div>
	</div>

#wrap{
	clear: both;
	background-color: silver;
	margin-top: 160px;
	padding:35px 0;
}

.main-center{
	width:940px;
	margin: 0 auto;

}
.content{
	width: 960px;
	margin: 0 auto;
}

#like .like_box{
	width: 600px;
	float: left;

	}

Answer 1

940pxの中に600pxの要素を3つが並ばないでしょう。
2つ並んでいるように見えているのは2番目の要素が.like-boxとなっていて、.like_boxのスタイルが当たっていないからです。

.like_boxを囲う要素を作ってflexでも使ったほうが簡単だと思います。

【これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/flexbox/

【よこ並びのCSS。】
http://lopan.jp/layout/

Comments

[liisa]

ありがとうございます。サイトを参考にさせていただきます。