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

デモを見る

解像度が異なる場合は、メディア クエリを追加し、それに応じてラッパー幅とコンテンツ幅を定義する必要があります。

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

それが役立つことを願っています。

Answer 2

#content{overflow:hidden;}

また

#wrapper{overflow:hidden;}

「float:left」の div がありますが、親には「haslayout」プロパティがありません