2

絶対コンテナーの幅を指定せずに、絶対位置の div 内に複数のフロートを含めることは可能ですか?

画像を参照してください: ここに画像の説明を入力

忍者の編集: 絶対とフロートを使用したコードは完全に機能しますが、私の場合はそうではありません. 問題を単純化しようとしましたが、明らかに何かが間違っています。理由が分かり次第また連絡します。ごめん。

編集2：そうです 、これが私の問題の理由です。

HTML

<div id="anotherContainer">
    Outercontainer
    <div class="main">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
</div>

CSS

#anotherContainer {
    position: relative;
    outline: 4px solid red;
    width: auto;
    height: auto;
    display: inline-block;
}

.main{
    border: 1px solid #f00;
    position: absolute;
}

.left{
    float: left;
    border: 1px solid #0f0;
    padding: 20px;
}

.right{
    float: right;
    border: 1px solid #00f;
    padding: 20px;
}​

JSフィドル

私の間違いです。コンテナ #anotherContainer はこれに影響を与えないと思いました。

4

3 に答える 3

3

フロートは親コンテナーの幅/高さに寄与していませんが、使用できます

display:inline-block

または、より複雑な状況では、次のように表示します: table、table-cell、table-row など.

詳細については、http ://www.w3schools.com/cssref/pr_class_display.asp を参照してください。

レビュー（例）

<div style="position:absolute;border:solid 1px red;">
  <div style="display:inline-block">A</div>
  <div style="display:inline-block">B</div>
</div>​

内側の div の幅を指定することもできず、ブラウザに使用して選択させることもできます

<div style="position:absolute;border:solid 1px red; display:table-row">
  <div style="display:table-cell">A</div>
  <div style="display:table-cell">B</div>
</div>​

これにより、両方の div の高さが同じになります。

内側の div の幅を同じにしたい場合は、次のようにします。

<div style="position:absolute;border:solid 1px red; display:table-row">
  <div style="display:table-cell;width:50%">A</div>
  <div style="display:table-cell;width:50%">Blejf lkwejf lwekfjlkw ejfjwelf jlkwe jflkw elfk wlek flkwe flk wjelfkj lwke jflkw elkfjlwej lfkwjelkf lkweflk</div>
</div>​
于 2012-06-01T09:59:10.543 に答える