css - 頭が沸騰する基本的なCSS

Question

.long {
width: 100%;
}
.short {
width: 49.2%;
}

上記のクラスを定義しましたが、何らかの理由で 2 つの短い div を参照すると、それらは別々の行に表示されます (期待どおりに並んでいません)。

これは基本中の基本です。

Answer 1

div はブロック要素であるため、一方または両方に float を追加しない限り、互いに隣り合うことはありません。(また、.long クラスは div をコンテナ全体に広げ、その隣に表示される他の要素を排除します。)

.long {
    float: left;
    width: 100%;
}
.short {
    float: left;
    width: 49.2%;
}

Answer 2

float属性を定義する必要があります。

.short {
    float: left;
    width: 49.2%;
}

例

http://jsfiddle.net/7eS22/

Answer 3

のように、divを使用display: inline-block;またはフロートできますfloat:left;。

これがお役に立てば幸いです。

Answer 4

「表示」プロパティも変更する必要があります。div 要素のデフォルトは block であり、特に指定しない限り、その隣の要素を受け入れません。

display: block は、段落とヘッダーが常にそうであったように、要素がブロックとして表示されることを意味します。ブロックには上下に空白があり、別の順序で並べられた場合 (たとえば、float 宣言を別の要素に追加するなど) を除いて、ブロックの隣に HTML 要素を配置することはできません。 http://quirksmode.org/css/css2/display.html

あなたは付け加えられます：

.short { width: 49.2%; display: inline-block; }

または、最初のものをフロートすることができます:

.short:first-child { float: left; }

どちらも本質的にあなたが望むものを手に入れるはずです。フロート時のオーバーフローやインライン ブロックの IE7 ハックなど、どちらの手法にも注意すべき追加事項がありますが、少なくともこれで開始できます。