3

HTML と CSS に少し慣れていなくて申し訳ありませんが、すべてを試してみましたが、これを機能させることができないようです。トップ DIV とボトム DIV があります。上部の DIV には、左右に配置する必要があるさらに 2 つの DIV が含まれています。

<!DOCTYPE html>
<html>
<body>
    <div>
        <div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(187, 187, 187);">
            <div style="font-size: 30px; float: left;">Top Left</div>
            <div style="font-size: 30px; float: right;">Top Right</div>
        </div>
        <div >blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
            blah blah blah blah blah blah blah blah blah blah blah blah
            blah blah blah
        </div>
    </div>
</body>
</html>

次のようなものを見たい：

Top Left                          Top Right
-------------------------------------------

blah blah blah blah blah blah blah

しかし、代わりに私は得る

----------------------------
Top Left blah blah Top Right

最上位の DIV の高さがゼロに設定されているようです。なぜ私はわからない。DIV に何かを入れると、自動的に伸びるはずだと思いましたか?

私の実際のコードは次のとおりです。

<div style="border-bottom: 1px solid rgb(187, 187, 187); overflow: auto; clear: both; padding: 15px;">
    <div style="font-size: 30px;">Bearbeiten</div>
    <div style="font-size: 30px; width: 50px;">X</div>
</div>
<div style="position: absolute; bottom: 10px;"><input style="font-size: 15px; height: 30px; width: 130px;"
                                                      value="Cancel" class="OverlayButton" id="Overlay.CancelButton"
                                                      type="button"><input
        style="font-size: 15px; height: 30px; width: 130px;" value="Save" class="OverlayButton" type="button"><input
        style="font-size: 15px; height: 30px; width: 130px;" value="Delete" class="OverlayButton" type="button"></div>
4

4 に答える 4

6

overflow: hidden2 つのフロートを含む div を配置します。

http://jsfiddle.net/SntpD/

CSS を使用することもできますが:after、もう少し複雑です。

.container:after {
    clear: both;
    display: block;
    content: "";
    height: 0;
}

http://jsfiddle.net/SntpD/1/

于 2013-03-28T14:33:36.173 に答える
2

overflow: auto; float: none; clear: both親で使用できますdiv。 overflow: hidden@Explosion Pills で提案されているように使用することもできます。しかし、これはよりクリーンで互換性のある方法です

http://jsfiddle.net/pixelass/yPZQ9/

于 2013-03-28T14:38:30.990 に答える
1

float を含む親 div にクリアを適用する必要があります (たとえば、指定されたマークアップを使用)。

body > div > div:first-child {
    height: auto;
    overflow: hidden;
}

（もちろん、パフォーマンスのために、より良いセレクターを使用する必要があります）

于 2013-03-28T14:34:43.070 に答える
1

width:50%上部の Div 内の両方の div に与えることができます。

見てみましょう：

http://jsfiddle.net/v5Dn3/

于 2013-03-28T14:36:15.220 に答える