0

私は CSS を初めて使用し、最初の Web サイトを CSS として作成しようとしていますが、ボディ用に 2 つのボックスを並べて配置するのに問題があり、上の 4 つのボックスが互いに隣り合っていません。運が悪いので、フロートと位置をいじってみました。

ここでサイトを見ることができます: http://gdisinc.com/barker/default.php

私はそれを次のようにしようとしています: http://gdisinc.com/barker/images/menubar/layout_barker.jpg

私が間違っていることと、それを修正する方法を教えてください。ありがとうございました！

4

3 に答える 3

1

あなたが作ったものはほとんどなかったので、それらのポイントを整理したので、以下で言及されているものであなたcssをうまく更新しました:-cssbugscss

CSS

div#main {
    margin: auto;
    overflow: hidden;
    width: 902px;
}

div#outerbox {
    background-color: #A2282C;
    border: 2px solid #FFFFFF;
    float: left;
    height: 300px;
    width: 660px;
}

div#innerbox {
    background-color: #4D1516;
    border: 1px solid #000000;
    height: 277px;
    margin-left: 10px;
    margin-top: 10px;
    width: 640px;
}

div#sideouterbox {
    background-color: #A2282C;
    border: 2px solid #FFFFFF;
    float: right;
    height: 300px;
    width: 222px;
}
于 2012-08-22T10:06:19.173 に答える
0

まず、ボックスの幅がギリギリです。もう少し小さくしてみてください

その後の使用

display:inline-block;

ボックスの幅の合計がコンテナに収まる場合、問題はありません。

お役に立てれば

于 2012-08-22T10:05:41.273 に答える
0

フロートと奇妙なオーバーフローのないソリューション: 隠しステートメント、標準の配置のみ...

div#main {
    margin: auto;
    position: relative
    width: 902px;
}

div#outerbox {
    border: 2px solid white;
    height: 300px;
    width: 669px;
    background-color: #A2282C;
    position: absolute;
}

div#innerbox {
    margin: 10px;
    border: 1px solid black;
    height: 277px;
    background-color: #4D1516;
}

div#sideouterbox {
    border: 2px solid white;
    height: 300px;
    width: 222px;
    background-color: #A2282C;
    position: absolute;
    right: 0;
}

div#sideinnerbox {
    margin-top: 10px;
    margin-left: 10px;
    border: 1px solid black;
    height: 280px;
    width: 198px;
    background-color: #4D1516;
}

これをスタイルにコピーするだけで問題ありません。

于 2012-08-22T10:10:38.907 に答える