问题
The "tiles" (white boxes) that you see in image 1 are responsive to the users screen. If the screen size just isn't big enough, it leaves a gap on the right hand side. What I want to do is achieve the result as seen in image 2. Here is my code so far for those specific elements..
HTML:
<div class="main">
<div class="inner">
<div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div>
</div>
</div>
CSS:
.main{
width:100%;
background: #000;
}
.main .inner{
margin:10px;
min-width: 140px;
background: red;
}
.main .inner .tile{
margin:10px;
height: 120px;
width: 120px;
background: #fff;
display: inline-block;
}
IMAGE 1:
IMAGE 2:
回答1:
You can do this with media queries to set the width of the .inner
class at various browser widths, then set the margin-left
and margin-right
properties to auto
to center it. Set the padding-top
and padding-bottom
properties of the .main
class instead of setting top and bottom margins on the .inner
class. Use a combination of padding
on the .inner
class and border
on the .tile
class to space the tiles out evenly 10px
apart.
For a detailed description of media queries: CSS media queries
example
css
.main{
width: 100%;
background: #000;
padding-top: 10px;
padding-bottom: 10px;
}
.main .inner{
padding: 5px;
font-size: 0px;
display: table;
margin-left: auto;
margin-right: auto;
background-color: red;
}
.main .inner .tile{
margin: 0px;
padding: 0px;
border: 5px solid red;
height: 120px;
width: 120px;
background: #fff;
display: inline-block;
}
Set a media query for each browser width, in this example I have only gone up to 800px, but you can add as many more as you need.
css (continued)
@media (min-width: 280px) {
.main .inner{
width: 130px;
}
}
@media (min-width: 320px) {
.main .inner{
width: 260px;
}
}
@media (min-width: 480px) {
.main .inner{
width: 390px;
}
}
@media (min-width: 640px) {
.main .inner{
width: 520px;
}
}
@media (min-width: 800px) {
.main .inner{
width: 780px;
}
}
The media queries are used to set the width of .inner
to a multiple of 130px
which is the width of a .tile
with a border of 10px
.
If you want to change the spacing between the tiles you would need to alter the border
on the .tile
class, the padding
on the .inner
class, the margin-top
and margin-bottom
on the .main
class and the width
that is specified in each of the media queries.
回答2:
You could set max-width for .inner
then have text-align: center
for .main
回答3:
.main .inner{
min-width: 140px;
background: red;
text-align:center;
}
Add text-align:center css property http://jsfiddle.net/dolours/afKgg/
来源:https://stackoverflow.com/questions/15857276/css-center-responsive-div