html - 如何在行中放置一些div

Question

我的标记有一些问题。所以，我有 HTML:

<div id="wrapper">
 <div id="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
 </div>
</div>

和 CSS:

#wrapper {
 margin: auto;
 margin-top: 10px;
 width: 80%;
}
.item {
 float: left;
 margin: 0;
 width: 320px;
 height: 200px;
}

我认为 .item div 必须在父 #wrapper 和 #content div 中居中，因为 margin:auto 属性，但它不起作用。我该如何解决这个问题？

Answer 1

您必须通过针对不同分辨率使用媒体查询来控制它。你的 html:

<div id="wrapper">
 <div id="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
 </div>
</div>

CSS:

#wrapper {
 margin-top: 10px;
 width: 100%;
}
#content{
    width:80%;
    margin:0px auto;
}
.item {
 float: left;
 margin: 0;
  background:blue;
  border:1px solid #000;
 width: 200px;
 height: 200px;
}

参见 demo

对于不同的分辨率，您必须添加媒体查询并根据它们定义包装宽度和内容宽度。

@media only screen and (min-width: 768px) and (max-width: 1024px) { … }
@media only screen and (max-width: 768px) { … }

希望对您有所帮助。