css - テーブルではなくCSSを使用して2つのdivを並べて表示するにはどうすればよいですか?

Question

2 つの div を並べて表示するにはどうすればよいですか? 最初の div を左側に表示し、2 番目の div をそのすぐ横に表示します。

<div class="first">first</div>
<div class="second">second</div>

私が欲しいもの：

最初の秒

私が得るもの：

最初の

秒

テーブルの回避策:

<table>
    <tr>
        <td>first</td>
        <td>second</td>
    </tr>
</table>

2 つの div をこれらの 2 つのテーブルセルのように動作させるにはどうすればよいですか?

score 8 · Accepted Answer

8

float left を最初の div に追加するだけで機能します!

于 2013-09-20T06:00:47.060 に答える

score 7 · Accepted Answer

7

あなたが使用することができます

 float:left

于 2013-09-20T06:04:09.213 に答える

score 6 · Accepted Answer

基本的に2つのテクニックがあります。

を使用してfloat。left要素に浮動値 ( | ) を割り当てるrightと、使用可能なスペースに基づいてインライン要素のように次々とスパンされます。 ダウンサイズ: フローティングはページの通常の流れを壊すため、clearfixメソッドを使用して、親コンテナーをそのコンテンツと同じくらい長くする必要があります。（実際は悪くない）
を使用してinline-block。ブロック要素に割り当てdisplay:inline-blockて、使用可能なスペースに基づいて「インライン」要素のように次々とスパンするようにします。 縮小:マークアップ内の各「改行」は、インラインブロック要素を持つ空白のように扱われるため、ビュー内の要素間にギャップが生じます。また、「inline-block」要素への「inline-block」の割り当ては IE7 ではサポートされていないため、メソッドを使用してギャップを克服し、IE7 Hackする必要があります。

私は実際にはinline-block方法を好みます。

score 4 · Accepted Answer

シンプル, float:left;div css に使用,

<div style="float:left" > </div>
<div style="float:left" > </div>

およびCSS Floats 101は、理解するのに最適な場所であり、非常に役立ちます。

score 1 · Accepted Answer

多くの方法。このフィドルのように、「最初」/左端の div をフロートできます。

CSS:

div.left
{
    float: left;
    border: 1px solid red;
}

div.lefthugger
{
    border: 1px solid blue;
}

5 に答える 5