0

我正在尝试创建一个包含 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##             |
|_______________________________|

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

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

它应该支持IE8

感谢您的帮助！

4

5 回答 5

1

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

then use css3 media queries to account for the various screen sizes.

tutorial about media queries. http://webdesignerwall.com/tutorials/css3-media-queries

DEMO: http://jsfiddle.net/tgdYq/ (resize the pane with the output)

as a quick example:

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

Specify the width of the divs in %.

Example

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}

​Demo here 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

In that situation I prefer use float: left style. This allows divs automatically aligned one next to the other according the browser screen resolution.

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

Your styles can be:

#div-container
{
   width: 100%;
}

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

Also there is a useful jQuery plugin: http://masonry.desandro.com/

于 2012-09-21T07:28:05.377 回答
0

OK, there are a couple of considerations. 1/ Are you using media queries - I hope so - and you should be to get this done correctly. Use 

    @media all and (max-width:640px){
    styles in here
    }
    @media all and (max-width:320px){
    styles in here
    }
Also The syles in here do need to be percentages - if you want 3 columns at say 320px but 4 colums at 640px use this 
    @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; 
        }
    }
DO NOT FORGET to use the "border-box" as this makes the box model include the paddings as the overall size rather than add to the box model and cause it to be too large for its parent container.

于 2012-09-21T13:28:06.377 回答