-1

I am working on a win8-applike webdesign, and find it quite hard to position the divs properly.

First of all my code an a jsfiddle of how it looks like at the moment:

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/

so the purple div in the left upper corner which you dont really see is app_kategories I want to position it under the app_logo, which is the yellow div on the top left. I don`t know how to get it there.

What I am asking is for ideas how to make this possible, and I am also wondering if there are better ways of realizing some kind of Win8like designs, because in my version with smaller screens it could look quite badly, I am also thinking about making the scales % and not em.

I found this website http://etchapps.com/ which looks pretty cool, but its not in the source code how they did it.

4

2 回答 2

1

你需要看看几件事。第一个是您没有清除任何避免布局问题所必需的浮动元素。我建议阅读 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/

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

于 2013-10-30T20:32:44.580 回答
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_kategoriesdiv 似乎具有与其他框不同大小的边距。

为了解决这个问题，我漂浮并立即清除了这两个盒子上的漂浮物。

我确信有更好的（不那么混乱/hacky）的方法来避免保证金崩溃。但是，这是一种似乎可行的方法，因为边距不会在浮动元素上折叠。

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/

于 2013-10-30T20:22:30.270 回答