0

私はCSSの初心者で、ここにいる誰かが私のやり方の誤りを指摘する忍耐力を持ってくれることを望んでいました。

基本的に、私はモバイルWebプラットフォームを作成しており、4つの同じサイズの長方形（一部の解像度では正方形）のタイルで構成されるコンセプト「ランディングページ」を設計しています（ここからインスピレーションを得ています：http：//tinyurl.com/ beartss）。

明らかに、このアプリケーションはモバイル指向であるため、固定の幅と高さを避けてきましたが、リンクした画像に見られるのと同じレイアウトを完全に取得することはできません。私のHTMLは次のようにレイアウトされています。

        <div class="page-container">
            <div class="tile-1"></div>
            <div class="tile-2"></div>
            <div class="tile-3"></div>
            <div class="tile-4"></div>
        </div>

そして、私が使用している現在のCSSは...

html, body, .container 
{
    height: 100%;
    min-height: 100%;
}

.page-container 
{
    margin: 0 auto;
    border: 1px solid black;
    height: 99%;
    min-height: 99%;
    width: 99%;
}

.tile-1 
{
    border: 1px solid black;
    height: 48%;
    width: 48%;
}

.tile-2 
{
    border: 1px solid black;
    height: 48%;
    width: 48%;
}

.tile-3 
{
    border: 1px solid black;
    height: 48%;
    width: 48%;
}

.tile-4 
{
    border: 1px solid black;
    height: 48%;
    width: 48%;
}

これは私が達成しようとしていることとはかけ離れたものではなく、パーセンテージベースの高さは決して良い考えではないという噂があります。どちらにしても、上記のCSSは私にこれを与えます：http：//i.imgur .com / nXbcHze.png

どんな助けでもありがたいです、私はちょうど高さで何かを逃したと確信しています。

4

2 に答える 2

1

試してみてくださいfloat:left。デモ->それはあなたが探している解決策ですか？

min-widthテンプレートがどの解像度でも同じになるように、各タイルにを追加しました。

于 2013-01-19T21:16:40.627 に答える
1

通常、ブロックレベルの要素は別のブロックレベルの要素と同じ行に表示されません。したがって、それらをフロートさせるか、表示をインラインブロックのようなものに変更する必要があります。

http://jsfiddle.net/kyyjg/

ボックスモデルがどのように機能するかにより、境界線のpxと寸法のパーセンテージを混合すると、要素が適切な量のスペースを占有しないことがわかります。追加するとbox-sizing: border-box役立つ場合があります。

別のアプローチに興味がある場合は、flexboxを使用して次のように行うことができます。

http://jsfiddle.net/LJMdx/4/

html, body {
    height: 100%;
}

.page-container {
    min-height: 100%;
    background: red;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1%;
}

.page-container div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-flex: 1 1 48%;
    flex: 1 1 48%;
    margin: 1%; /* optional */
    border: 1px solid;
}

タイル間のギャップが必要ない場合は、1％のマージンとパディングを削除します：http：//jsfiddle.net/LJMdx/3/

http://caniuse.com/#feat=flexbox

于 2013-01-19T21:28:23.267 に答える