Html 如何将一些div放入行中

我的标记有一些问题。因此，我有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>

---

我想.item div必须以parent#wrapper和#content divs due margin:auto属性为中心，但它不起作用。如何解决此问题？

您只需使用

显示：内联块

而不是float:left:

#wrapper {
 margin: auto;
 margin-top: 10px;
 width: 80%;
 text-align:center;
}
.item {
 display:inline-block;
 margin: 0;
 /* width: 320px; /* not required, you can let width:auto */
 height: 200px;
 text-align:left;
}

---

问题的真正原因是-

float left

of

.item

div。如果删除

float:left

属性，则它们会自动设置边距

您希望将

.item

div居中，而不是推到左侧。 这可能会给你带来麻烦，因为事情并没有按照你所希望的那样发展，因为你所拥有的每一个元素都是向左浮动的

您可以尝试以下方法：

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>

或

---

您有带有“float:left”的div，但父级没有“haslayout”属性

您必须通过使用不同分辨率的媒体查询来控制它。 您的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>

见

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

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

---

希望能有所帮助。

您的包装袋是否足够大，一行可以装两件物品？你现在的代码应该可以工作。是的，它足够大，可以有3个块。但它们不居中如果我理解正确，您希望项目排成一行并能够环绕。你真的确定你的代码不起作用吗？你的代码确实做到了这一点。你能分享一把不起作用的小提琴吗？是的，但在这种情况下。项目块不会自动转移到下一行。你想不想把你的。项目放在行中？这不是我想要的。看，这一页将是公文包页，所以我需要在3个块的行，这将被转移到下一行自动在浏览器的大小CSS“媒体查询”是最好的解决方案，如果你想控制窗口大小@sumit答案对解决您的问题很有用。

#content{overflow:hidden;}

#wrapper{overflow:hidden;}

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

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

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