1

3 つの左フローティング div (1、2 & 3) と 1 つの右フローティング div (4) があります。これは、HTML コードの最後の div でもあります。左側の 3 つは幅の 60% を占め、最後の div は右側を埋める必要があります。ただし、div 4 は div 3 を過ぎて浮動し、その後停止します。

<body>
    <div style="width: 60%; float: left; background-color: red;">
        div 1
    </div>
    <div style="width: 60%; float: left; background-color: red;">
        div 2
    </div>
    <div style="width: 60%; float: left; background-color: red;">
        div 3
    </div>
    <div style="width: 40%; float: right; background-color: yellow;">
        div 4
    </div>
</body>

div をページの上部に移動する方法について何か提案はありますか?

4

2 に答える 2

0

これはあなたが望むものですか？デモ

HTMLコードを少し編集しました：

<section class="container">
    <div class="block one"></div>
    <div class="block two"></div>
    <div class="block three"></div>
    <div class="block four"></div>
</section>

次の CSS ルールを追加するだけです。

*, *:before, *:after {
    box-sizing: border-box;
}

body, div, section {
    margin: 0;
    padding: 0;
}
html, body {
    background: #CCC;
    height: 100%;
}
.block {
    height: 100px;
    display: inline-block;
    border: 1px solid black;
}
.block:not(.four) {
    float: left;
    width: calc(60% / 3);
}
.four {
    width: calc(100% - 60%);
}
.container > .four {
    float: right;
}

calc()アンカーを要素に設定する関数を使用しました。ここでブラウザのサポートを確認できます

編集申し訳ありませんが、私はあなたの質問を理解していませんでした. これはあなたが望むものです！デモ=)

乾杯、レオ！

于 2013-07-07T20:29:54.093 に答える
0

ここで達成しようとしているのはcontent、ページ (左側のフローティング div) とsidebar(右側の div) にいくつかを配置することだと思います。
さて、それを行うには多くの方法があります。ここに方法がありますwithout using floats（右または左）。

HTML:

<body>
    <section style="width: 60%;"> <!-- Your main content goes in here -->
        <div style="background-color: red;">div 1</div>
        <div style="background-color: red;">div 2</div>
        <div style="background-color: red;">div 3</div>
    </section>
    <aside style="width: 40%;" class="right"> <!-- content for right sidebar -->
        <div style="background-color: yellow;">div 4</div>
    </aside>
</body>

CSS:

aside,section {
    display : inline-block;
    padding : 0;
    margin : 0;
}

aside.right {
    vertical-align: top; //to bring sidebar to top
}

ここにデモフィドルがあります

于 2013-07-07T20:54:26.973 に答える