编辑：

Question

我正在开发一个类似win8-app的网页设计，发现很难正确定位div。

首先，我的代码是一个关于它现在看起来如何的问题：

HTML：

<div id="appWrapper">
    <div id="app_logo">

    </div>
    <div id="app_text">

    </div>
    <div id="app_login">

    </div>
    <div id="app_kategories">

    </div>
    <div id="app_register">

    </div>
    <div id="app_buy">

    </div>
</div>

CSS：

div#app_logo {
    float: left;
    margin: 0.5em;
    height: 15em;
    width: 15em;
    background-color: #FFD300;
}

div#app_text {
    float: left;
    margin: 0.5em;
    height: 31em;
    width: 30em;
    background-color: #7109AA;
}

div#app_login {
    float: left;
    margin: 0.5em;
    float: left;
    height: 15em;
    width: 35em;
    background-color: #7109AA;
}

div#app_kategories {
    float: bottom;
    margin: 0.5em;
    height: 15em;
    width: 15em;
    background-color: #7109AA;
}

div#app_register {
    float: left;
    margin: 0.5em;
    height: 15em;
    width: 35em;
    background-color: #7109AA;
}

div#app_buy {
    float: left;
    margin: 0.5em;
    height: 15em;
    width: 82em;
    background-color: #FFD300;    
}

http://jsfiddle.net/gGWfr/embedded/result/

所以你不会真正看到的左上角的紫色div是app_kategories我想把它放在app_logo下面，这是左上角的黄色div。我不知道怎么去那里。

我要问的是如何使这成为可能的想法，我也想知道是否有更好的方法来实现某种类似Win8的设计，因为在我的版本中，屏幕较小，看起来非常糟糕，我也是考虑制作比例％而不是em。

我发现这个网站http://etchapps.com/看起来很酷，但在源代码中并没有这样做。

Answer 1

float:bottom不是有效的CSS定义。您可以将float设置为“left”，“right”，“none”或“inhertit”。

我通过将div#app_login和div#app_kategories包含在包含div并浮动div的情况下取得了成功。

我还从两个孩子floats中删除了divs。

HTML：

<div id="appWrapper">
    <div id="container_left">
        <div id="app_logo"></div>
        <div id="app_kategories"></div>
    </div>
    <div id="app_text"></div>
    <div id="app_login"></div>
    <div id="app_register"></div>
    <div id="app_buy"></div>
</div>

CSS：

div#container_left {
    position:relative;
    float:left;
}

div#container_left div#app_logo {
    margin: 0.5em;
    height: 15em;
    width: 15em;
    background-color: #FFD300;
}

div#container_left div#app_kategories {
    margin: 0.5em;
    height: 15em;
    width: 15em;
    background-color: #7109AA;
}

http://jsfiddle.net/gGWfr/1/

编辑：

由于"margin collapse"，app_login和app_kategories div的边距似乎与其他框的边距不同。

为了解决这个问题，我浮起水面并立即清理那两个盒子上的花车。

我确信有更好的（更少杂乱/黑客）避免保证金崩溃的方法。但是，这是一种似乎有效的方法，因为边距不会在浮动元素上崩溃。

div#container_left div#app_logo {
    float:left;
    clear:left;
    margin: 0.5em;
    height: 15em;
    width: 15em;
    background-color: #FFD300;
}

div#container_left div#app_kategories {
    float:left;
    clear:left;
    margin: 0.5em;
    height: 15em;
    width: 15em;
    background-color: #7109AA;
}

http://jsfiddle.net/gGWfr/2/

Answer 2

您需要注意的几件事情。首先，您没有清除任何浮动元素，这是避免布局问题所必需的。我建议阅读Chris Coyier的帖子，以便更熟悉花车。

http://css-tricks.com/all-about-floats/

有许多方法可以清除浮点数，例如clearfix hack或者只是将overflow: hidden;应用于父元素。

其次，如果您想要一个响应式布局，您需要使用基于百分比的宽度和媒体查询。尝试查看网格系统以开始使用。 Coyier再次在这里发表了很好的帖子： http://css-tricks.com/dont-overthink-it-grids/。有几十种可供选择，例如twitter bootstrap，zurb基础，gumby，960网格等。

这是一个简单的：

http://simplegrid.info/

希望这会让你开始。一旦你的布局正确，你可以使用CSS定位来移动东西。

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

克里斯没有付钱给我，我发誓，只是一个很棒的博客。

如何让这个div进入正确的位置

2 个答案:

HTML：

CSS：

编辑：