1

ページのサイズを変更すると、「ブロック」が自動的に互いに下に移動して、ページに完全に収まるようになりますが、「メイン」の div をドロップダウンすると、サイズも変更されるため、残りがありません。まだ見栄えが良いので、右側にスペースがありますか？

助けてくれてどうもありがとう！

HTML

<html>
    <head>
        <!-- css -->
        <link rel="stylesheet" type="text/css" href="main.css">
        <title></title>
    </head>
    <body>
        <div class="main">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
        </div>
    </body>
    </html>

CSS

body
{
    background-color: #000;
}

.main
{
    width: 90%;
    height: 1000px;
    background-color: #fff;
    margin-right: auto;
    margin-left: auto;
    margin-top: 75px;
    margin-bottom: 75px;
}

.box
{
    width: 200px;
    height: 300px;
    background-color: #000; 
    position: relative;
    left: 10px;
    float: left;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 10px;
}
4

1 に答える 1

1

内部フロートまたはdisplay: inline-block.

しかし、たくさんの media-queries を使用した回避策があり@media all and (max-width: xxx)ます。

http://jsfiddle.net/QvAwa/1/を参照

より広い画面幅をカバーする場合は、メディア クエリの数を増やす必要があります。

これは、IE9+、FF3.5+、Chrome4+ で正常に動作します。

于 2013-03-17T17:01:31.483 に答える