ここから本文です

100枚 BOXを横に並べることが出来ませぬ 以下のコードで ブラウザから確認した...

sci********さん

2017/9/904:03:29

100枚

BOXを横に並べることが出来ませぬ
以下のコードで ブラウザから確認したところ 各BOXが縦に並んでいる!!
横に並べたいのじゃぁ!!

ちなみに
、 (box1)
(box2) ( box4↓まで続く)
(box3) (box4 )

という感じを目指しているのです
単純にまだこのままだと大きさ的に小さいからこの配置になっていないだけ??
いやぁでも、cssできちんと場所指定しているから 横にいってないとおかしいよなぁ
なぜか全部縦にいっちゃうんですよねぇcssがないのと同じ なんでだぁぁ

↓は 上がhtml 下がcssです宜しく頼みます

<!DOCTYPE html>
<html Lang="ja">
<head>
<meta charset="UTF-8">
<tytle>ああ</tytle>
<meta name="viewport" content="width=device-width">
<Link rel="stylesheet" href="style2.css">
</head>
<body>

<div class="box1">
BOX1
</div>

<div class="boxA">
<div class="boxB">
<div class="box2">
BOX2
</div>
<div class="box3">
BOX3
</div>
</div>
<div class="box4">
BOX4
</div>
</div>



</body>
</html>


@charset "UTF-8";

body{
font-family: 'メイリオ ','Hiragino Kaku Gothic Pro',sans-serif
}

@media (min-width: 768px) {
.boxA:after {content: "";
display: block;
clear: both}
.boxB{float: left
width: 80%}
.box4{float: left
width:20%}
}

閲覧数:
13
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

yoy********さん

2017/9/906:22:46

CSSに「;」が全部、抜けている。
そうなると、横にならない。

.boxB{float: left
width: 80%}
.box4{float: left
width:20%}

それを「;」を入れる。

.boxB{
float: left;
width: 80%;
}
.box4{
float: left;
width:20%;
}

こうすれば、きれいで見やすいし、「;」が抜けてないか?も、分かる。

「;」で区切りしないと働かない(反映されない)ので、忘れずに付けましょう。

質問した人からのコメント

2017/9/9 07:27:17

Thx!!

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる