CSS中心响应DIV [英] CSS Center Responsive DIV

问题描述

您在图片1中看到的图块（白框）会响应用户屏幕。如果屏幕尺寸不够大，它在右手边留下一个缝隙。我想要做的是实现的结果，如图2所示。这是我的代码到目前为止这些特定的元素。

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> 
< / 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： img src =https://i.stack.imgur.com/lCeSa.pngalt =enter image description here>

解决方案

您可以通过媒体查询来设置 .inner 类在各种浏览器宽度的宽度，然后设置 margin-left 和 margin-right 属性将 auto 设置 .main 属性的 padding-top 和 padding-bottom $ c> class，而不是在 .inner 类上设置顶部和底部边距。在 .inner 类和边框 padding > .tile 类将 10px 均匀地分隔成瓦片。

有关媒体查询的详细说明： CSS媒体查询

示例

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

为每个浏览器宽度设置媒体查询，高达800px，但您可以根据需要添加更多。

css（续）

  @media 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; 
} 
} 
  

媒体查询用于设置 .inner 为 130px 的倍数，它是 .tile ，边框 10px 。

如果您想更改瓷砖之间的间距，改变 .tile 类中的 border ， padding .inner 类， margin-top 和 margin-bottom 在每个媒体查询中指定的 .main 类和 width p>

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:

解决方案

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.

这篇关于CSS中心响应DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！