html - フローティング div を隣り合わせに保つ

Question

私は次のものを持っています：

<div id="container">
    <div id="childA">123</div>
    <div id="childB">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>

<style>
    #childA, #childB {float:left}
</style>

. #childB_ childA_ #childA_ #container - #childA_

のテキストの量がわからないため、幅を設定できません#childA。(#childAその中に多くのテキストが含まれることはなく、1 行だけにとどまるべきです。)

助けてくれてありがとう - 時間をかけて探しましたが、うまくいくものは見つかりませんでした.

score 4 · Accepted Answer

これを防ぐには、max-widthをmax-width:#container - #childA;オンに設定します。#childB

編集：

別の方法：から削除float:left;し、max-withをlikechildBに追加して追加します。overflow:hiddenchildAmax-width:80%

デモ

score 0 · Accepted Answer

2つの要素が幅が広すぎて親コンテナに並べて収まらないため、＃childBは#childAの下にラップされています。

これを試して：

#container {
    margin: 0;
    padding: 0;
}

#childA, #childB {
    float: left;
    width: 50%;
    white-space: nowrap;
}

score 0 · Accepted Answer

childA と childB の幅を設定して、そのようなクラスを使用します

#childA, #childB {float: left;width:50%;}

score 0 · Accepted Answer

あなたが試すことができます

<div id="container">
   <div id="childA">123</div>
   <div id="childB">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>

<style>
    #childA {
      float: left;
    }
</style>

そのため、#childAdiv は左にフロートし#childB、上下に折り返されませんが、欠点は、高さが高#childBさを超えると #childA の下にテキストが折り返されることです。#childA

html - フローティング div を隣り合わせに保つ

4 に答える 4

Related

Reference