0

8 div で構成される Web サイトを作成しようとしています。各 div の高さは異なります (幅は同じです)。

次の方法で、ブラウザーの画面解像度に応じて、div を隣り合わせに配置する必要があります。

 _________________________
|                         |
| ##### ##### ##### ##### |
| ##1## ##2## ##3## ##4## |
| #####       ##### ##### |
|       ##### ##### ##### |
| ##### ##6##       ##### |
| ##5## ##### ##7##       |
| #####             ##8## |
|_________________________|

ユーザーの幅が小さくなると、次のように div が 3 列になるという考え方です。

 ___________________
|                   |
| ##### ##### ##### |
| ##1## ##2## ##3## |
| #####       ##### |
|       ##### ##### |
| ##### ##5##       |  (There will be a scrollbar if needed)
| ##4## ##### ##### |
| #####       ##6## |
| ##### ##8## ##### |
| #####             |
|                   |
| ##7##             |
|___________________|

ユーザーの画面解像度が高い場合は、5 つの列が表示されます。

 _______________________________
|                               |
| ##### ##### ##### ##### ##### |
| ##1## ##2## ##3## ##4## ##5## |
| #####       ##### ##### ##### |
|       ##7## ##### #####       |
| #####       #####             |
| ##6##                         |
| #####       ##8##             |
|_______________________________|

セルと列の間のパディングは同じままであることに注意してください。

また、div の順序を同じに保つ必要があることにも注意してください。つまり、左から右にカウントする場合、1 ～ 8 の順序を維持する必要があります。

IE8をサポートする必要があります

よろしくお願いします！

4

5 に答える 5

1

これを使用するようにdivを設定するdisplay: inline-block;と、各行がずれないようになります。

次に、css3 メディア クエリを使用して、さまざまな画面サイズを考慮します。

メディアクエリに関するチュートリアル。http://webdesignerwall.com/tutorials/css3-media-queries

デモ: http://jsfiddle.net/tgdYq/ (出力でペインのサイズを変更)

簡単な例として：

div {
    display: inline-block;
    width: 25%;
}

@media screen and (max-width: 420px) {
  div {
    width: 33%;
  }
}

@media screen and (min-width: 1200px) {
  div {
     width: 20%;
  }
}
于 2012-09-21T05:59:42.143 に答える
0

float: leftそのような状況では、私は使用スタイルを好みます。これにより、ブラウザーの画面解像度に応じて、div が自動的に隣り合わせに配置されます。

<div class="div-container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div>
   <div>8</div>
</div>​

あなたのスタイルは次のとおりです。

#div-container
{
   width: 100%;
}

#div-container div
{
   float: left;
   width: 100px; //your fixed size
}

また、便利な jQuery プラグインもあります: http://masonry.desandro.com/

于 2012-09-21T07:28:05.377 に答える
0

div の幅を % で指定します。

例

HTML

<div class="wrapper">
<div class="dv">1</div>
<div class="dv">2</div>
<div class="dv">3</div>
<div class="dv">4</div>
<div class="dv">5</div>
<div class="dv">6</div>
<div class="dv">7</div>
<div class="dv">8</div>
</div>​

CSS

.wrapper{width:100%; 
background-color:red; 
overflow:auto; 
margin:0; padding:0}

.dv{width:25%; 
background-color:green; 
border:grey solid 1px; 
height:100px; float:left; 
display:table}

デモはこちらhttp://jsfiddle.net/h5GeK/3/

于 2012-09-21T06:03:07.470 に答える
0 
<html>
<head>
<style type="text/css">

    #main{
        width:100%;
        margin:auto;
}
.test{
    display:inline-block;
    width:300px;
    border:thin blue solid;

}
</style>
</head>
<body>
    <div id="main">
        <div class="test">Blah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
        Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
        Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
        Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah</div>

    </div>
</body>
</html>
于 2012-09-21T06:15:58.937 に答える
0

OK、いくつかの考慮事項があります。1/ メディア クエリを使用していますか (そうであることを願っています)。これを正しく行う必要があります。使用する 

    @media all and (max-width:640px){
    ここのスタイル
    }
    @media all and (max-width:320px){
    ここのスタイル
    }
また、ここのスタイルはパーセンテージである必要があります-たとえば320pxで3列が必要で、640pxで4列が必要な場合はこれを使用します 
    @media all and (max-width:320px){
        div.column{/* 3 列/
            幅:33%; ディスプレイインラインブロック; パディング:10px;
            -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;

        }
    }
    @media all and (max-width:640px){
        div.column{/ 4 列 */
        幅:25%; ディスプレイインラインブロック; パディング:10px;
        -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
        }
    }
「border-box」を使用することを忘れないでください。これにより、ボックス モデルにパディングが追加されるのではなく、全体のサイズとしてパディングが含まれるようになり、親コンテナーに対して大きすぎます。

于 2012-09-21T13:28:06.377 に答える