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 divs due margin：auto property，但它不起作用。我怎么能解决这个问题？

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 left div .item。如果删除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>

CSS：

#wrapper { 
 margin-top: 10px;
 width: 80%;
 border:1px solid black;
}
.item { 
 margin: auto;
 width: 320px;
 height: 200px;
 border:1px solid black;
}

Try This

Answer 3

#content{overflow:hidden;}

或

#wrapper{overflow:hidden;}

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

Answer 4

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

希望它会有所帮助。

如何把一些div排成一排

4 个答案: