親要素のfloatが効かないのは、2重で浮くが使えないためか？

実現したいことは自己解決はしたものの、なぜこのコードの場合だとできない原因がよく分からないので調べ方などを教えてください。
CSS

*{
	margin:0;
	padding:0;
}
#wrapper{
	width:900px;
	margin:80px auto auto auto;
}
#header{
	background-color:#000;
	color:#FFF;
	padding:30px 20px;
}
#contents{
	margin:30px auto auto auto;
	padding:20px;
	border:solid 1px #CCC;
}
h2{
	border-bottom:solid 1px #CCC;
	color:green;
	padding:10px;
}
#left{
	float:left;
}
#right{
	float:left;
}
h3{
	color:blue;
	float:left;
	margin-left:5px;
}
.checkimg{
	width:5%;
	height:auto;
	float:left;
}
.lkoumoku,.rkoumoku{
	clear:both;
}
#right+div{
	clear:both;
}
#footer{	
	text-align:center;
	border:solid 1px #000;
	margin:20px auto;
	padding:20px 0px;
}

HTML

<!DOCTYPE html>
<html>
<head>
<title>無題ドキュメント</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>感じのいいサザエさん</h1>
</div>
<!--header_end-->
<div id="contents">
<h2>
お魚加えたドラ猫追いかけて裸足でかけてく愉快なサザエさん。みんなが笑ってる～♪お日様も笑ってる～♪ 
</h2>
<div id="left">
<img class="checkimg"src="images/436H.jpg" />
<h3>ルールルルッル～</h3>
<div class="lkoumoku first">
お魚加えたドラ猫追いか<br />けて裸足でかけてる<br />
愉快なサザエさん。<br />みんなが笑ってる～♪<br />お日様も笑ってる～♪ 
</div>
<img class="checkimg"src="images/436H.jpg" />
<h3>ルールルルッル～</h3>
<div class="lkoumoku second">
お魚加えたドラ猫追いか<br />けて裸足でかけてる<br />愉快なサザエさん。<br />みんなが笑ってる～♪<br />お日様も笑ってる～♪ 
</div>
</div>
<!--left_end-->
<div id="right">
<img class="checkimg"src="images/436H.jpg" />
<h3>ルールルルッル～</h3>
<div class="rkoumoku first">
お魚加えたドラ猫追いか<br />けて裸足でかけてる<br />
愉快なサザエさん。<br />みんなが笑ってる～♪<br />お日様も笑ってる～♪ 
</div>
<img class="checkimg"src="images/436H.jpg" />
<h3>ルールルルッル～</h3>
<div class="rkoumoku second">
お魚加えたドラ猫追いか<br />けて裸足でかけてる<br />愉快なサザエさん。<br />みんなが笑ってる～♪<br />お日様も笑ってる～♪ 
</div>
</div>
<!--right_end-->
<div>
お魚加えたドラ猫追いかけて裸足でかけてる愉快なサザエさん。みんなが笑ってる～♪お日様も笑ってる～♪ 
</div>
</div>
<!--contents_end-->
<div id="footer">
NPO法人　東芝
</div>
<!--footer_end-->
</div>
<!--wrapper_end-->
</body>
</html>

解決した方法
CSS

*{
	margin:0;
	padding:0;
}
#wrapper{
	width:900px;
	margin:80px auto auto auto;
}
#header{
	background-color:#000;
	color:#FFF;
	padding:30px 20px;
}
#contents{
	margin:30px auto auto auto;
	padding:20px;
	border:solid 1px #CCC;
}
h2{
	border-bottom:solid 1px #CCC;
	color:green;
	padding:10px;
}
#check{
	display:flex;
	display:-webkit-flex;

}
h3{
	color:blue;
	float:left;
	margin-left:5px;
}
.checkimg{
	width:5%;
	height:auto;
	float:left;
}
.lkoumoku,.rkoumoku{
	clear:both;
}
#footer{	
	text-align:center;
	border:solid 1px #000;
	margin:20px auto;
	padding:20px 0px;
}

HTML

<!DOCTYPE html>
<html>
<head>
<title>無題ドキュメント</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>感じのいいサザエさん</h1>
</div>
<!--header_end-->
<div id="contents">
<h2>
お魚加えたドラ猫追いかけて裸足でかけてく愉快なサザエさん。みんなが笑ってる～♪お日様も笑ってる～♪ 
</h2>
<div id="check">
<div>
<img class="checkimg"src="images/436H.jpg" />
<h3>ルールルルッル～</h3>
<div class="lkoumoku first">
お魚加えたドラ猫追いか<br />けて裸足でかけてる<br />
愉快なサザエさん。<br />みんなが笑ってる～♪<br />お日様も笑ってる～♪ 
</div>
<img class="checkimg"src="images/436H.jpg" />
<h3>ルールルルッル～</h3>
<div class="lkoumoku second">
お魚加えたドラ猫追いか<br />けて裸足でかけてる<br />愉快なサザエさん。<br />みんなが笑ってる～♪<br />お日様も笑ってる～♪ 
</div>
</div>
<div>
<img class="checkimg"src="images/436H.jpg" />
<h3>ルールルルッル～</h3>
<div class="rkoumoku first">
お魚加えたドラ猫追いか<br />けて裸足でかけてる<br />
愉快なサザエさん。<br />みんなが笑ってる～♪<br />お日様も笑ってる～♪ 
</div>
<img class="checkimg"src="images/436H.jpg" />
<h3>ルールルルッル～</h3>
<div class="rkoumoku second">
お魚加えたドラ猫追いか<br />けて裸足でかけてる<br />愉快なサザエさん。<br />みんなが笑ってる～♪<br />お日様も笑ってる～♪ 
</div>
</div>
</div>
<!--check_end-->
<div>
お魚加えたドラ猫追いかけて裸足でかけてる愉快なサザエさん。みんなが笑ってる～♪お日様も笑ってる～♪ 
</div>
</div>
<!--contents_end-->
<div id="footer">
NPO法人　東芝
</div>
<!--footer_end-->
</div>
<!--wrapper_end-->
</body>
</html>

私の勝手な推測では2重で浮かせることが不可能なのかなと思っています。
補足です。
display:flex;を使うと、floatで横並びした画像とルールルルッル～の文字が左右に並ぶのに、float:left;を使うと左右に並ばないことです。
すみません。2段組になっていればOKです。
最初のコードの書き方だと、2段組にならないです。
もう一度貼ります。
CSS

*{
	margin:0;
	padding:0;
}
#wrapper{
	width:900px;
	margin:80px auto auto auto;
}
#header{
	background-color:#000;
	color:#FFF;
	padding:30px 20px;
}
#contents{
	margin:30px auto auto auto;
	padding:20px;
	border:solid 1px #CCC;
}
h2{
	border-bottom:solid 1px #CCC;
	color:green;
	padding:10px;
}
#left{
	float:left;
}
#right {
	float:left;
}
h3{
	color:blue;
	float:left;
	margin-left:5px;
}
.checkimg{
	width:5%;
	height:auto;
	float:left;
}
.lkoumoku,.rkoumoku{
	clear:both;
}
#right+div{
	clear:both;
}
#footer{
	text-align:center;
	border:solid 1px #000;
	margin:20px auto;
	padding:20px 0px;
}

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link href="style5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>感じのいいサザエさん</h1>
</div>
<!--header_end-->
<div id="contents">
<h2>お魚加えたドラ猫追いかけて裸足でかけてく愉快なサザエさん。みんなが笑ってる～♪お日様も笑ってる～♪</h2>
<div id="left">
<img class="checkimg" src="images/436H.jpg">
<h3>ルールルルッル～</h3>
<div class="lkoumoku first">
お魚加えたドラ猫追いか<br>
けて裸足でかけてる<br>
愉快なサザエさん。<br>
みんなが笑ってる～♪<br>
お日様も笑ってる～♪</div>
<img class="checkimg" src="images/436H.jpg">
<h3>ルールルルッル～</h3>
<div class="lkoumoku second">
お魚加えたドラ猫追いか<br>
けて裸足でかけてる<br>
愉快なサザエさん。<br>
みんなが笑ってる～♪<br>
お日様も笑ってる～♪</div>
</div>
<!--left_end-->
<div id="right">
<img class="checkimg" src="images/436H.jpg">			<h3>ルールルルッル～</h3>
<div class="rkoumoku first">					お魚加えたドラ猫追いか<br>
けて裸足でかけてる<br>
愉快なサザエさん。<br>
みんなが笑ってる～♪<br>
お日様も笑ってる～♪</div>
<img class="checkimg" src="images/436H.jpg">
<h3>ルールルルッル～</h3>
<div class="rkoumoku second">
お魚加えたドラ猫追いか<br>
けて裸足でかけてる<br>
愉快なサザエさん。<br>
みんなが笑ってる～♪<br>
お日様も笑ってる～♪</div>
</div>
<!--right_end-->
<div>
お魚加えたドラ猫追いかけて裸足でかけてる愉快なサザエさん。みんなが笑ってる～♪お日様も笑ってる～♪
</div>
</div>
<!--contents_end-->
<div id="footer">
NPO法人　東芝
</div>
<!--footer_end-->
</div>
<!--wrapper_end-->
</body>
</html>

kei344

2018/02/15 12:09

なにが「できて」なにが「できない」のでしょうか。もう少し具体的に記述いただけませんか？

s8_chu

2018/02/15 12:19 編集

コードの下にある画像がそのコードの実行結果なんですかね？だとすれば画像の順番がおかしい気がしますが。

EBOOT.PBP

2018/02/15 12:24

はい、そうです。ただ単に画像の順番がおかしいというイージーミスですか？確認してみます。

EBOOT.PBP

2018/02/15 12:29

うーん、特に画像の順番はおかしくない気が…

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

回答3件

当方ではスクリーンショットのように縦には並びませんでした。
2段組みになりましたが、左に寄っており、「2分割」という感じではありません。

ただ、

CSS
1#left,#right{
2    width:100%;
3}

を追加すると、スクリーンショットのようになりました。

CSS
1#left,#right{
2    width:50%;
3}

にすると、これがやりたい感じのことかな、みたいな表示になりました。

以上から考察するに、ご提示のコードには含まれていない部分でのwidthの指定に原因があるのではないかな、と思います。

投稿2018/02/15 12:55

Lhankor_Mhy

総合スコア36074

質問文の上のコードを以下のようにして実行しましたが、質問文に掲載されている画像のようにはなりませんでした。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        #wrapper {
13            width: 900px;
14            margin: 80px auto auto auto;
15        }
16
17        #header {
18            background-color: #000;
19            color: #FFF;
20            padding: 30px 20px;
21        }
22
23        #contents {
24            margin: 30px auto auto auto;
25            padding: 20px;
26            border: solid 1px #CCC;
27        }
28
29        h2 {
30            border-bottom: solid 1px #CCC;
31            color: green;
32            padding: 10px;
33        }
34
35        #left {
36            float: left;
37        }
38
39        #right {
40            float: left;
41        }
42
43        h3 {
44            color: blue;
45            float: left;
46            margin-left: 5px;
47        }
48
49        .checkimg {
50            width: 5%;
51            height: auto;
52            float: left;
53        }
54
55        .lkoumoku, .rkoumoku {
56            clear: both;
57        }
58
59        #right + div {
60            clear: both;
61        }
62
63        #footer {
64            text-align: center;
65            border: solid 1px #000;
66            margin: 20px auto;
67            padding: 20px 0;
68        }
69    </style>
70</head>
71<body>
72<div id="wrapper">
73    <div id="header">
74        <h1>感じのいいサザエさん</h1>
75    </div>
76    <!--header_end-->
77    <div id="contents">
78        <h2>
79            お魚加えたドラ猫追いかけて裸足でかけてく愉快なサザエさん。みんなが笑ってる～♪お日様も笑ってる～♪
80        </h2>
81        <div id="left">
82            <img class="checkimg" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/436H.jpg"/>
83            <h3>ルールルルッル～</h3>
84            <div class="lkoumoku first">
85                お魚加えたドラ猫追いか<br/>けて裸足でかけてる<br/>
86                愉快なサザエさん。<br/>みんなが笑ってる～♪<br/>お日様も笑ってる～♪
87            </div>
88            <img class="checkimg" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/436H.jpg"/>
89            <h3>ルールルルッル～</h3>
90            <div class="lkoumoku second">
91                お魚加えたドラ猫追いか<br/>けて裸足でかけてる<br/>愉快なサザエさん。<br/>みんなが笑ってる～♪<br/>お日様も笑ってる～♪
92            </div>
93        </div>
94        <!--left_end-->
95        <div id="right">
96            <img class="checkimg" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/436H.jpg"/>
97            <h3>ルールルルッル～</h3>
98            <div class="rkoumoku first">
99                お魚加えたドラ猫追いか<br/>けて裸足でかけてる<br/>
100                愉快なサザエさん。<br/>みんなが笑ってる～♪<br/>お日様も笑ってる～♪
101            </div>
102            <img class="checkimg" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/436H.jpg"/>
103            <h3>ルールルルッル～</h3>
104            <div class="rkoumoku second">
105                お魚加えたドラ猫追いか<br/>けて裸足でかけてる<br/>愉快なサザエさん。<br/>みんなが笑ってる～♪<br/>お日様も笑ってる～♪
106            </div>
107        </div>
108        <!--right_end-->
109        <div>
110            お魚加えたドラ猫追いかけて裸足でかけてる愉快なサザエさん。みんなが笑ってる～♪お日様も笑ってる～♪
111        </div>
112    </div>
113    <!--contents_end-->
114    <div id="footer">
115        NPO法人　東芝
116    </div>
117    <!--footer_end-->
118</div>
119<!--wrapper_end-->
120</body>
121</html>

実行結果

また、解決した方法のコードを以下のようにして実行しましたが、質問文の画像のようにはなりませんでした。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        #wrapper {
13            width: 900px;
14            margin: 80px auto auto auto;
15        }
16
17        #header {
18            background-color: #000;
19            color: #FFF;
20            padding: 30px 20px;
21        }
22
23        #contents {
24            margin: 30px auto auto auto;
25            padding: 20px;
26            border: solid 1px #CCC;
27        }
28
29        h2 {
30            border-bottom: solid 1px #CCC;
31            color: green;
32            padding: 10px;
33        }
34
35        check {
36            display: flex;
37            display: -webkit-flex;
38
39        }
40
41        h3 {
42            color: blue;
43            float: left;
44            margin-left: 5px;
45        }
46
47        .checkimg {
48            width: 5%;
49            height: auto;
50            float: left;
51        }
52
53        .lkoumoku, .rkoumoku {
54            clear: both;
55        }
56
57        #footer {
58            text-align: center;
59            border: solid 1px #000;
60            margin: 20px auto;
61            padding: 20px 0px;
62        }
63    </style>
64</head>
65<body>
66<div id="wrapper">
67    <div id="header">
68        <h1>感じのいいサザエさん</h1>
69    </div>
70    <!--header_end-->
71    <div id="contents">
72        <h2>
73            お魚加えたドラ猫追いかけて裸足でかけてく愉快なサザエさん。みんなが笑ってる～♪お日様も笑ってる～♪
74        </h2>
75        <div id="check">
76            <div>
77                <img class="checkimg" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/436H.jpg"/>
78                <h3>ルールルルッル～</h3>
79                <div class="lkoumoku first">
80                    お魚加えたドラ猫追いか<br/>けて裸足でかけてる<br/>
81                    愉快なサザエさん。<br/>みんなが笑ってる～♪<br/>お日様も笑ってる～♪
82                </div>
83                <img class="checkimg" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/436H.jpg"/>
84                <h3>ルールルルッル～</h3>
85                <div class="lkoumoku second">
86                    お魚加えたドラ猫追いか<br/>けて裸足でかけてる<br/>愉快なサザエさん。<br/>みんなが笑ってる～♪<br/>お日様も笑ってる～♪
87                </div>
88            </div>
89            <div>
90                <img class="checkimg" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/436H.jpg"/>
91                <h3>ルールルルッル～</h3>
92                <div class="rkoumoku first">
93                    お魚加えたドラ猫追いか<br/>けて裸足でかけてる<br/>
94                    愉快なサザエさん。<br/>みんなが笑ってる～♪<br/>お日様も笑ってる～♪
95                </div>
96                <img class="checkimg" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/436H.jpg"/>
97                <h3>ルールルルッル～</h3>
98                <div class="rkoumoku second">
99                    お魚加えたドラ猫追いか<br/>けて裸足でかけてる<br/>愉快なサザエさん。<br/>みんなが笑ってる～♪<br/>お日様も笑ってる～♪
100                </div>
101            </div>
102        </div>
103        <!--check_end-->
104        <div>
105            お魚加えたドラ猫追いかけて裸足でかけてる愉快なサザエさん。みんなが笑ってる～♪お日様も笑ってる～♪
106        </div>
107    </div>
108    <!--contents_end-->
109    <div id="footer">
110        NPO法人　東芝
111    </div>
112    <!--footer_end-->
113</div>
114<!--wrapper_end-->
115</body>
116</html>

実行結果

しかし、以下の部分を修正することで質問文に掲載されている画像のようになりました。
修正前

CSS
1check {
2    display: flex;
3    display: -webkit-flex;
4}

修正後

CSS
1#check {
2    display: flex;
3    display: -webkit-flex;
4}

実行結果(修正後)

投稿2018/02/15 12:45

s8_chu

総合スコア14731

ベストアンサー

他の回答にあるように私の環境でも、どの提示コードも「縦に並ぶスクリーンショット」のようではなく、2段組みになっていますが、均等に2分割でなく左に寄っています。

「Lhankor_Mhy」さんのご指摘のとおり、CSS「style5.css」や提示されていない他のCSSコードが原因の可能性があります。

float使用での疑問で

（floatを使用した場合）2重で浮かせることが不可能なのかな･･･

「2重」の意味を間違えているかもですが、floatでの多段組（今回の2段組みを含め、3段や4段等）だと推測しますが「可能」です。

サイトの特性や環境にもよりますが、昔のレイアウトでテーブル流用が今は推奨されなくなったのと同じで、多段組の場合にflexが使用可能であれば、今後はドンドンflexを使用された方が良いかと思います。floatがダメなのではなく、適材適所の意味です。画像周りにテキストを回り込ませる雑誌等のような表現でfloatは有効です。
･･･個人的な感想です(^^)･･･

投稿2018/02/16 02:18