divとdivを横に並べて表示できない

Question

###前提・実現したいこと
htmlとcssについての質問です。
htmlでdiv要素とdiv要素を横に並べて表示させたい
のですが、調べてやってもできませんでした。

Comments

[kei344]

具体的にHTMLおよびCSSなどを質問文に追記いただいたほうが回答を得られやすいと思います。

Answer 1

①floatを使用する方法
②display:table;を使用する方法
③display:flex;を使用する方法
④div自体display:inline-block;にしてしまう方法

などがあります。
①は本来のfloatプロパティの用途とは異なるのでおすすめしません。
②③は古いブラウザでは対応していないので注意してください。
④はIE6～7だとコツがいりますが、IE8以上なら何も考えずに使えます。

デザインや前後の要素がどうなっているのかがわからないので、どれが最適かは答えにくいのですが…
ひととおり調べると勉強になると思います。
がんばってください(´∀｀*)

Answer 2

こんにちは。

<div>
 1
</div>
<div>
 2
</div>

この結果が
1 2
としたいところ、
1
2
となってしまう、ということですよね？
divはブロック要素ですので、前後に改行が入ります。
（そのほかのブロック要素にはpなどがあります。）
（改行が入らない要素はインライン要素です。spanなどがあります。）

ブロック要素を横に並べる方法はいくつかありますが、
cssでdisplay:inline-blockを指定するか、

<div class="parent">
 <div class="child">
  1
 </div>
 <div class="child">
  2
 </div>
</div>

.parent {
 width: 100%;
 display: flex;
}
.child {
 width: 100px;
}

上記のように並べたい要素をさらにdivで囲い、display: flexを指定するなど。。。

「ブロック要素 横並び」や「div 横並び」で検索するとすぐに出てきますよ。
今後HTML/CSSを扱う機会が多いのであれば、各要素がどんな性質を持っているのか学ぶと良いですよ^^/

Comments

[yuta0801]

とても分かりやすい説明ありがとうございました

[MaShiRo_H]

他の方がおっしゃっているように、要素自身を回り込ませるfloatもあります。

単に横並びでもそれぞれ性質が異なりますので、
特徴を比較しながら実現したい内容に合った方法を見つけてくださいね^^

Answer 3

floatとinline-blockを使う方法がありますよ。
classで指定すると他の要素に影響が出ないのでおすすめです！

Answer 4

CSSでそのdiv要素にfloatを指定します。