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

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

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

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

请参阅此代码，我希望它会有所帮助。

Answer 2

在这里：小提琴 http://jsfiddle.net/fx62r/2/

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

在同一行上写入元素以避免空白。像这样：

<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

    }

围绕中心div的浮动div（对于网格）

2 个答案: