html - 围绕中心 div float div(对于网格)

Question

我想制作一个 div 网格，中间有一个较大的中心 div，但小的 div 无法正确换行。我必须改变什么？由于带宽等原因，我尽量不使用表格。

我的 HTML:

<div id="main">

    <!-- a lot of .icon's here -->
    <div class="icon"></div>
    <div class="title"></div>
    <div class="icon"></div>
    <!-- a lot of .icon's here -->

</div>

我的 CSS:

#main {
  display: inline-block;
  margin: 5em 0 3em 0;
  width: 66.2em;
  height: 35.2em;
  text-align: left;
  overflow: hidden;
}

.icon {
  background: #000;
  height: 5em;
  width: 5em;
  margin: 0 0.2em 0.2em 0;
  display: inline-block;
}

.title {
  background: #777;
  height: 10.2em;
  width: 21.4em;
  margin: 0 0.2em 0.2em 0;
  display: inline-block;
}

提前致谢!

Answer 1

给你:Fiddle http://jsfiddle.net/fx62r/2/

inline-block在元素之间留下空白。我会用 float: left;而不是内联 block

将元素写在同一行以避免空白。像这样:

<div class="icon"></div><div class="title"></div><div class="icon"></div>

并移除边距:

 .icon {
     margin: 0 0.2em 0.2em 0;  //Remove.

 }

 .title {
      margin: 0 0.2em 0.2em 0; //Remove

    }