画像を横並べにして、さらに各画像の下に文字を書きたいです。そもそも、画像が横並びにもならないのでアドバイスをください。

html
1<body id=like>
2
3////省略
4
5<div id="wrap">		
6<div class="content">
7			<div class="main-center">
8				<h1>趣味</h1>
9				
10				<div class="like_box"><h4>水泳</h4>
11						 <img src="./images/.png" alt="水泳" height="200px" width="200px">
12
13				</div>
14
15				<div class="like-box"><h4>体操</h4>
16                    <img src="./images/.jpg" alt="体操" width="200px" height="200">
17                </div>
18
19		
20	        </div>
21	     </div>
22	</div>
23

css
1#wrap{
2	clear: both;
3	background-color: silver;
4	margin-top: 160px;
5	padding:35px 0;
6}
7
8.main-center{
9	width:940px;
10	margin: 0 auto;
11
12}
13.content{
14	width: 960px;
15	margin: 0 auto;
16}
17#like .like_box{
18	width: 540px;
19	float: left;
20	}
21
22

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

回答2件

CSS
1.main-center {
2  display: flex;
3  flex-wrap: wrap;
4}
5
6.main-center > h1 {
7  width: 100%;
8}

投稿2019/02/12 04:25

x_x

総合スコア13749

ベストアンサー

floatで組む場合、HTMLの一部組替と修正、CSSの一部追加と修正が必要です。
各要素の大きさや、floatの性質を見直されると良いかと思います。

-追記-
画像を手持ちで試してたのですが、そのままのパスで回答してしまったので、提示コードどおりに画像パスを修正しました。
(^^;)

HTML
1<div id="wrap">        
2  <div class="content">
3    <div class="main-center">
4      <h1>趣味</h1>
5      <div class="like_box">
6        <img src="./images/.png" alt="水泳" height="200" width="200"> <!-- ← 前後（上下）組替 -->
7        <h4>水泳</h4> <!-- ← 前後（上下）組替 -->
8      </div>
9      <div class="like_box"> <!-- ← 修正 -->
10        <img src="./images/.jpg" alt="体操" width="200" height="200"> <!-- ← 前後（上下）組替 -->
11        <h4>体操</h4> <!-- ← 前後（上下）組替 -->
12      </div>
13    </div>
14  </div>
15</div>
16

CSS
1#wrap {
2  clear: both;
3  background-color: silver;
4  margin-top: 160px;
5  padding:35px 0;
6}
7
8.content {
9  width: 960px;
10  margin: 0 auto;
11}
12
13.main-center {
14  width:940px;
15  margin: 0 auto;
16  overflow: hidden;  /* ← 追加 */
17}
18
19#like .like_box {
20  width: 470px;  /* ← 修正 */
21  float: left;
22}