-1

私は自己財務会計プログラムを作成していますが、html、css、および php を使用してそれを行うつもりです

フロントページに5つのメインdivを持つ基本的なレイアウトがあります

ここにモックがあります： http://s24.postimage.org/le9yrx4np/divs.jpg

私は以前にコーディングしたことがなく、一生懸命失敗しています

「デスクトップ」と互換性のあるこのレイアウトが欲しい これは私のデスクトップバージョンです

1024 x 768 の画面に基づいて作業しています

しかし、私はすべてのブラウザと互換性のあるWebkitが必要です。これは、少し大きいか小さい場合にサイズを変更できるようにしたいからです。100％のように設定できるので、必要かどうかはわかりません

これが私のこれまでの仕事です

http://jsfiddle.net/dhJPS/

私の悩みは

  1. 中央の 3 つの div が右の div と重なっています。左の div から右の div まで中央に配置されていないことに注意してください。

  2. フローティングの概念をうまく理解できない

とにかく、これで私を少し助けることができれば、大歓迎です!!

ありがとう

#leftside {
background-color: blue;
width: 170px;
height: 770px;
float: left;

}

#intab {
background-color: yellow;
width: 100%;
height: 297px;


}

#currentday {
background-color: white;
width: 100%;
height: 170px;



}

#outtab {
background-color: yellow;
width: 100%;
height: 297px;


}

#rightside {
background-color: black;
height: 770px;
width: 200px;
float: right;
margin-top: -765px;
}



* { 
margin: 0px;
padding: 0px;
list-style-type: none;  

}


body {
text-align: center;
display: block;
}
img {
border: none;
}
4

2 に答える 2

0

これがあなたの答えです。重要な問題: すべての中心的なものをグループ化するための内側の div のマージン

[非常に重要] display: inline-block; - これにより、div が定義した正確なサイズになります。使用しない場合は、幅と高さの両方に 100% を使用します

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style>
        .panels {
            height: 768px;
        }

        .rightside, .leftside {
            width: 170px;
            height: 100%;
            background-color: yellow;
            display: inline-block;
        }

        .leftside {
            float: left;
        }

        .rightside {
            float: right;
        }

        .innerPanels {
            height: 100%;
            margin: 0 170px;
        }

        .intab, .outtab {
            height: 25%;
            background-color: lime;
            opacity: 0.75;
        }
        .currentday{
            height: 50%;
            background-color: darkgray;
        }
    </style>
</head>
<body>

<div class="panels">
    <!--LEFT SIDE -->
    <div class="leftside">left side</div>
    <!-- RIGHT SIDE -->
    <div class="rightside">right side</div>

    <div class="innerPanels">
        <!-- IN -->
        <div class="intab">in</div>
        <!-- CURRENT DAY -->
        <div class="currentday">current day</div>
        <!-- OUT -->
        <div class="outtab">out</div>
    </div>

</div>
</body>
</html>
于 2013-03-12T07:45:23.270 に答える
0

いくつかのことを再配置する必要があります。

  • 何かを右にフロートさせる場合、HTML は常に他の HTML より前に来る必要があります。右、左、スタティックの順で行うのが最適です。

  • 常に CSS をカスケードする必要があります。スタイル シートの先頭にグローバル スタイルを配置します。本文のスタイルは、CSS の下部ではなく上部に配置する必要があります。

  • 最小幅を設定するラッパー div を追加しました。このようにして、内部コンテンツがその幅を下回ることはなく、物事が重なることはありません。ただし、必要に応じて拡張します。

  • width: 100%;CSS で設定する必要があることはめったにありません。必ずしも悪いことではありませんが、特に必要であることがわかっていない限り、わざわざ設定するべきではありません。

私はいくつかのものを再配置し、jsFiddle が必要としない HTML のいくつかを削除しました....ここで更新されたFIDDLE

于 2013-03-12T07:31:21.497 に答える