-1

私は win8 アプリのような Web デザインに取り組んでいますが、div を適切に配置するのが非常に難しいと感じています。

まず第一に、私のコードは現時点でどのように見えるかの jsfiddle です:

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/はかなりクールに見えますが、ソースコードにはありません。

4

2 に答える 2

1

あなたが見る必要があるいくつかのこと。1 つ目は、レイアウトの問題を回避するために必要なフローティング要素をクリアしていないことです。フロートに慣れるために、Chris Coyier の投稿を読むことをお勧めします。

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

clearfix ハックなどのフロートをクリアする方法や、単にoverflow: hidden;親要素に適用する方法はたくさんあります。

次に、レスポンシブ レイアウトが必要な場合は、メディア クエリと共にパーセンテージ ベースの幅を使用する必要があります。開始するには、グリッド システムを調べてみてください。ここでも Coyier が素晴らしい投稿をしています: http://css-tricks.com/dont-overthink-it-grids/。twitter ブートストラップ、zurb によるファンデーション、ガンビー、960 グリッドなど、文字通り何十もの選択肢があります。

ここに簡単なものがあります：

http://simplegrid.info/

うまくいけば、それがあなたを始めさせるでしょう。レイアウトが正しくできたら、css ポジショニングを使用して物事を移動できます。

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

Chris は私にお金を払っているわけではありません。

于 2013-10-30T20:32:44.580 に答える
1

float:bottomは有効な CSS 定義ではありません。float「左」、「右」、「なし」、または「継承」に設定できます。

私はラップすることで成功しdiv#app_login、それdiv#app_kategoriesをdiv保持してフローティングすることに成功しましたdiv。

floatsまた、2 つの子からを削除しました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/

編集：

「マージンの崩壊」により、app_loginおよびapp_kategoriesdiv は、残りのボックスとは異なるサイズのマージンを持っているように見えます。

これを修正するために、これら 2 つのボックスのフロートをフロートしてすぐにクリアしました。

マージンの崩壊を回避するためのより良い（乱雑/ハックの少ない）方法があると確信しています。ただし、フロート要素ではマージンが崩れないため、これは機能しているように見える 1 つの方法です。

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 に答える