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

您可以简单地使用display:inline-block而不是 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;
}

Answer 2

你的问题的真正原因是 - float leftdiv .item。如果您删除float:left财产而不是他们采取自动保证金。

你想让你的.itemdiv 居中，而不是推到左侧。现在这可能会给您带来麻烦，因为事情并没有按照您的意愿进行，因为您拥有的每个元素都浮动到左侧。

你可以试试这个：

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: 80%;
 border:1px solid black;
}
.item { 
 margin: auto;
 width: 320px;
 height: 200px;
 border:1px solid black;
}

尝试这个

Answer 3

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

查看演示

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

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

希望它会有所帮助。

Answer 4

#content{overflow:hidden;}

或者

#wrapper{overflow:hidden;}

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