見出しと画像を横2列に並べたい。

見出しと画像を横並びにしたいのに、改善されません。あまりにも時間がかかりすぎてるので、質問させていただきました。

html
1
2	<article>
3
4
5		<div class="shohin">
6			<ul class="img">
7				<li><img src="images/shouhin.gif" alt=""></li>
8			</ul>
9
10
11		</div>
12
13	<div class="mainmenu1">
14
15	<div class="iryo">
16		
17		<h2>医療保険</h2>
18		<ul class="menu1">
19			<li><img src="images/cure_03.gif" alt=""></li>
20			<li><img src="images/cure_long_03.gif" alt=""></li>
21		</ul>
22	</div>
23
24    
25
26    <div class="kaigo">
27
28		<h2>介護保険</h2>	
29		<ul class="menu2">
30			<li><img src="images/kaigo_03.gif" alt=""></li>
31		</ul>
32	
33	</div>
34
35
36
37	<div class="shusin_gan">
38
39		<h2>終身・ガン保険</h2>
40		<ul class="menu3">
41		    <li><img src="images/isshou_07.gif" alt=""></li>
42			<li><img src="images/kibou_03.gif" alt=""></li>
43		</ul>
44		
45	</div>
46
47
48	
49	
50
51	
52	<div class="zibyou">
53
54		<h2>持病保険</h2>	
55		<ul class="menu4">
56			<li><img src="images/saport.gif" alt=""></li>
57
58		</ul>
59	
60	</div>
61
62
63    </div>
64
65
66	</article>
67

css
1article{
2
3	margin: 0 auto;
4}
5
6
7
8
9.shohin li{
10    list-style-type: none;
11	text-align: center;
12	padding: 20px;
13	margin-top: 80px ; 
14    
15}
16
17
18
19
20.mainmenu1{
21	width: 1000px;
22	overflow: hidden;
23}
24
25
26
27.iryo h2{
28	width: 610px;
29	font-size: 26px;
30	margin-bottom:10px;
31	padding-bottom: 6px; 
32	border-bottom: green 2px solid; 
33	color: green;
34
35
36}
37
38ul.menu1 li{
39	display: block;
40    list-style-type: none;
41	float: left;
42	margin-right: 10px;
43	padding-bottom: 10px; 
44	
45
46
47}
48
49.kaigo h2{
50	float: right;
51	width: 300px;
52	font-size: 26px;
53	margin-bottom:10px;
54	padding-bottom: 6px;
55	border-bottom: orange 2px solid; 
56	color:  orange;
57	
58}
59
60ul.menu2 li{
61	display: block;
62    list-style-type: none;
63	float: right;
64	margin-left: 10px;
65	padding-bottom: 10px;
66	margin-bottom: 20px; 
67
68
69}
70
71
72
73.shusin_gan h2{
74	width: 610px;
75	font-size: 26px;
76	margin-bottom:10px;
77	padding-bottom: 6px; 
78	border-bottom: #4b0082 2px solid; 
79	color: #4b0082;
80}
81
82ul.menu3 li{
83	display: block;
84   list-style-type: none;
85	float: left;
86	margin-right: 10px;
87	
88	
89}
90
91
92.zibyou h2{
93	float: right;
94	width: 300px;
95	font-size: 26px;
96	margin-bottom:10px;
97	padding-bottom: 6px; 
98	border-bottom: #000080 2px solid; 
99	color: #000080;
100
101}
102
103
104ul.menu4 li{
105	display: block;
106    list-style-type: none;
107	float: right;
108	margin-left: 10px;
109	padding-bottom: 10px;
110}
111

img-size w300×h200

<!--[if lt IE 9]>

<![endif]-->です。

ブラウザで表示すると、（.kaigo h2　ul.menu2）と（.zibyou h2 ul.menu4）が少し下にずれてしまいます。paddingやmargin-bottomを使っても上がりません。

その他変だと思うコードがありましたら、ご指摘下さい！

宜しくお願い致します。

yoshinavi

2018/02/16 10:29 編集

今の質問では「どこをどうしたいか？」が不明な個所が多いので、現状のスクリーンショットの提示、および、画像ソフトやエクセル・ワードでも良いので「このように表現したい」の画像等があると、より良い回答が皆さんより得れると思います。 -追記- 「img-size ｗ300×ｈ200」とありますが、HTMLを見るとgif画像がいくつかありますが、全て同じサイズなのでしょうか？また、試したブラウザの種類やバージョン、および、OS等のPC環境を併せて記述したり、不具合の状況を再現できるHTML・CSSのコードを提示すると、より良い回答を得れると思います。

pon12

2018/02/17 06:38

確かにそうですよね。内容不足ですいません。今回の問題に関しては、解決しましたので、次回から気をつけます。

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

回答1件

ベストアンサー

的外れかもしれませんが、以下のようにすることで質問者さんが実現したいことが行えると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        article {
8            width: 1000px;
9            overflow: hidden;
10        }
11
12        .iryo h2 {
13            width: 610px;
14            font-size: 26px;
15            margin-bottom: 10px;
16            padding-bottom: 6px;
17            border-bottom: green 2px solid;
18            color: green;
19
20        }
21
22        ul.menu1 li {
23            display: block;
24            list-style-type: none;
25            float: left;
26            margin-right: 10px;
27            padding-bottom: 10px;
28
29        }
30
31        .kaigo h2 {
32
33            float: right;
34            width: 300px;
35            font-size: 26px;
36            margin-bottom: 10px;
37            padding-bottom: 6px;
38            border-bottom: orange 2px solid;
39            color: orange;
40
41        }
42
43        ul.menu2 li {
44            display: block;
45            list-style-type: none;
46            float: right;
47            margin-left: 10px;
48            padding-bottom: 10px;
49            margin-bottom: 10px;
50
51        }
52
53        .shusin_gan h2 {
54            width: 610px;
55            font-size: 26px;
56            margin-bottom: 10px;
57            padding-bottom: 6px;
58            border-bottom: #4b0082 2px solid;
59            color: #4b0082;
60        }
61
62        ul.menu3 li {
63            display: block;
64            list-style-type: none;
65            float: left;
66            margin-right: 10px;
67
68        }
69
70        .zibyou h2 {
71            float: right;
72            width: 300px;
73            font-size: 26px;
74            margin-bottom: 10px;
75            padding-bottom: 6px;
76            border-bottom: #000080 2px solid;
77            color: #000080;
78
79        }
80
81        ul.menu4 li {
82            display: block;
83            list-style-type: none;
84            float: right;
85            margin-left: 10px;
86            padding-bottom: 10px;
87        }
88
89        .iryo, .shusin_gan, .kaigo, .zibyou { /* 追記ここから */
90            display: flex;
91            align-items: start;
92        } /* 追記ここまで */
93    </style>
94</head>
95<body>
96<article>
97    <div class="shohin">
98        <ul class="img">
99            <li><img src="https://placehold.jp/3d4070/ffffff/300x200.png?text=images/shouhin.gif" alt=""></li>
100        </ul>
101    </div>
102    <div class="iryo">
103        <h2>医療保険</h2>
104        <ul class="menu1">
105            <li><img src="https://placehold.jp/3d4070/ffffff/300x200.png?text=images/cure_03.gif" alt=""></li>
106            <li><img src="https://placehold.jp/3d4070/ffffff/300x200.png?text=images/cure_long_03.gif" alt=""></li>
107        </ul>
108    </div>
109    <div class="shusin_gan">
110        <h2>終身・ガン保険</h2>
111        <ul class="menu3">
112            <li><img src="https://placehold.jp/3d4070/ffffff/300x200.png?text=images/isshou_07.gif" alt=""></li>
113            <li><img src="https://placehold.jp/3d4070/ffffff/300x200.png?text=images/kibou_03.gif" alt=""></li>
114        </ul>
115    </div>
116    <div class="kaigo">
117        <h2>介護保険</h2>
118        <ul class="menu2">
119            <li><img src="https://placehold.jp/3d4070/ffffff/300x200.png?text=images/kaigo_03.gif" alt=""></li>
120        </ul>
121    </div>
122    <div class="zibyou">
123        <h2>持病保険</h2>
124        <ul class="menu4">
125            <li><img src="https://placehold.jp/3d4070/ffffff/300x200.png?text=images/saport.gif" alt=""></li>
126        </ul>
127    </div>
128</article>
129</body>
130</html>