1

このようなデザインのシンプルなウェブページをデザインしようとしています。

しかし、私はまた、ウェブサイトをほぼすべてのサイズのウィンドウに合わせようとしています。その場合、ウィンドウのサイズがこれら 2 つの幅を合わせたものよりも小さい場合.gameInfo、クラスがクラスの上にジャンプする.playerListため、結果は次のようになります。このように。

明らかに、これは非常に醜いように見えます。私の目標は、可能な限り並行して.gameInfo作成することです。.playerList私の次のコードは次のようになります。

index.html :

    <body>
    <div id="container">
        <div class="gameState">
        </div>

        <div class="gameInfo">
        </div>

        <div class="playerList">
        </div>
    </div>
</body>

スタイル.css

body{
    background-color: #FAF7F8;
    font-family: "Calibri",  sans-serif;
    margin: 0px;
    padding: 0px;
}

#container{
    width: 89%;
    margin: 0 auto;
}

.playerList{
    float: right;
    background-color: #EDEDED;
    border: 1px solid;
    border-color: #D4D4D4;
    width: 123px;
    height: 340px;
    text-align: center;
    font-size: 45px;
    color: black;
}

.gameInfo{
    float: left;
    width: 89%;
    background-color: #EDEDED;
    border: 1px solid;
    border-color: #D4D4D4;
    height: 340px;
}

.gameState{
    background-color: #EDEDED;
    margin: 12px auto 12px auto;
    border: 1px solid;
    border-color: #D4D4D4;
    width: 100%;
    height: 64px;
    text-align: center;
    font-size: 45px;
    color: black;
}
4

3 に答える 3

0

さて、固定幅とパーセンテージベースの幅を混在させているので、これは予想される動作だと思います。

.gameInfoページの 89% がある場合.playerList、最大で 11% になります。問題は.playerList、固定幅 (123px) であるため、ページの 11% を超えると.gameInfo横に収まらないことです。

編集： これは適切な流体固定レイアウトです：

<body>
    <div id="container">
        <div class="gameState"></div>
        <div class="playerList"></div>
        <div class="gameInfo"></div>
    </div>
</body>​

body{
    background-color: #FAF7F8;
    font-family: "Calibri",  sans-serif;
    margin: 0px;
    padding: 0px;
}

#container{
    width: 89%;
    margin: 0 auto;
}

.playerList{
    float: right;
    background-color: #EDEDED;
    border: 1px solid;
    border-color: #D4D4D4;
    width: 123px;
    height: 340px;
    text-align: center;
    font-size: 45px;
    color: black;
}

.gameInfo{
    margin-right: 130px;
    background-color: #EDEDED;
    border: 1px solid;
    border-color: #D4D4D4;
    height: 340px;
}

.gameState{
    background-color: #EDEDED;
    margin: 12px auto 12px auto;
    border: 1px solid;
    border-color: #D4D4D4;
    width: 100%;
    height: 64px;
    text-align: center;
    font-size: 45px;
    color: black;
}​
于 2012-12-09T02:32:55.323 に答える
0

ページをレスポンシブにしたい場合は、この問題に対して @media クエリを使用できます。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

そのようにして、ブラウザの特定のサイズの下でサイズと位置を設定または変更できます。それは簡単で、今日のトレンドの 1 つです。

于 2012-12-09T02:37:52.320 に答える
0

問題は、ピクセルとパーセンテージの 2 種類の幅を混在させていることです。ブラウザー ウィンドウとコンテナー div をスケーリングすると、残りの 11% はある時点.playerListよりも少なくなります。123px

私が言う最も簡単な解決策は、.gameInfoa (境界線のために幅margin-right:30px;よりも少し大きく、間に少しスペースを残すことです。次に表示されるように、の width 属性と float 属性も削除する必要があります。に移動し、水平方向に利用可能なすべてのスペースを占有します (そして、フローティングを html で最初に来るようにする必要があります)。.playerInfo.gameInfo.playerInfo.playerInfo

上記の変更を加えたコードを参照してください: http://jsfiddle.net/qyKny/7/

EDIT：ちょうど1分前のrdiazvと同じ解決策ですが、より広範な説明とjsfiddleリンクのためにここに残します。

于 2012-12-09T02:39:34.587 に答える