浮动div不在页面顶部答案

【问题标题】：floating div not on top of page浮动div不在页面顶部
【发布时间】：2013-07-05 03:34:28
【问题描述】：

我有三个左浮动 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 到页面顶部吗？

【问题讨论】：

一些代码会很好
第二个@MoathHowari：帮助我们reproduce您的问题（注意：您可以编辑您的问题以添加代码）。
大胆猜测：也许您正在体验standard box-sizing 和border-box sizing 之间的区别？
感谢发布一些代码。
您的意思是 100% 的 60% 通过将所有左侧浮动分隔符相加或每个 60%？因为现在它显示有 3 个分隔符，每个分隔符将占据上排的 60%，并且该行上不再有 div 3 或 div 4 的空间，因为 div 1 和 2 都将超过 100%。我认为你应该用 20% 替换 60%，然后它们都适合。

标签： css html floating

【解决方案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 =)

干杯，狮子座！

【讨论】：

我想要的是这个：jsfiddle.net/SM68h 除了黄色 div 应该在页面顶部（div 1 旁边）而不是 div 3 旁边
但是在那个小提琴中，四个块不在顶部 O.o 中。如果我读得好，你想把四个元素放在顶部（就像我的fiddle），不是吗？
是的，但是 div 1、2 和 3 应该彼此下方，而不是彼此相邻。 div 1、2 和 3 将是我页面的主要内容，div 4 将是一个侧边栏。
谢谢，这就是我想要的！但是没有更简单的方法吗？默认情况下浮动 div 是否只是浮动超过一个 div 或者为什么它没有上升？
据我所知，你不能（如果你想使用float 属性）。

【解决方案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

【讨论】：

将* { box-sizing: border-box; } 添加到您的示例中，您就可以将第二个aside 设置为40%（在width 属性中）;)。
@LeonardoManrique 也不起作用，这是更新后的小提琴 - jsfiddle.net/kQ6S6/1 一直在摸不着头脑，如何做对，jsfiddle 的新手：-/