1

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

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
}

这是一个演示FIDDLE

于 2013-07-07T20:54:26.973 回答