Question

我有三个左浮动div（1,2和3）和一个浮动右（4），这也是我的HTML代码中的最后一个div。左边的三个占据宽度的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进入页面顶部的任何建议吗？

Answer 1

这是你想要的？ DEMO

我编辑了一下你的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()函数来设置元素的锚点。您可以看到浏览器支持here

编辑抱歉，我不明白你的问题。这就是你想要的！ DEMO =）

干杯，利奥！

Answer 2

我认为你要在这里实现的是在你的页面中放置一些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
}

以下是演示FIDDLE

浮动div不在页面顶部

2 个答案: