Question

我正在尝试创建一个包含8个div的网站。每个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##             |
|_______________________________|

请注意，单元格和cols之间的填充保持不变。

另请注意div的顺序应保持不变，这意味着如果从左到右计数，则应保留1-8的顺序。

它应该支持IE8

感谢您的协助！

Answer 1

将您的div设置为使用display: inline-block;这将确保每行不会错开。

然后使用css3媒体查询来考虑各种屏幕尺寸。

有关媒体查询的教程。 http://webdesignerwall.com/tutorials/css3-media-queries

DEMO：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%;
  }
}

Answer 2

以％为单位指定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/

Answer 3

<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>

Answer 4

在这种情况下，我更喜欢使用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/

Answer 5

好的，有几点需要考虑。 1 /您是否正在使用媒体查询 - 我希望如此 - 您应该正确地完成此操作。使用

    @media all and (max-width:640px){
    styles in here
    }
    @media all and (max-width:320px){
    styles in here
    }

另外这里的syles确实需要百分比 - 如果你想要320px的3列，但640px的4列使用这个

    @media all and (max-width:320px){
        div.column{/* 3 columns /
            width:33%; display-inline-block; padding: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 columns */
        width:25%; display-inline-block; padding:10px;
        -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; 
        }
    }

不要忘记使用“边框”，因为这会使框模型包含填充作为整体大小而不是添加到框模型并导致它对于其父容器来说太大。

如何根据屏幕分辨率对齐div

5 个答案: