Question

我正在尝试创建一个2x2网格结构，使用包裹在.container内的4个div而不使用float，如下所示：

[ ][ ]
[ ][ ]

然而，当我尝试这样做时，我正在体验这一点：

[ ]
[ ]
[ ]
[ ]

.box需要50％的高度和宽度，没有边框或边距。这是我用来尝试实现此目的的代码：

HTML

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

CSS

.container{
  width:600px;
  height:700px;
  position:relative;
}
.box{
  display:inline-block;
  width:50%;
  height:50%;
  background:red;
}

以下是要展示的JSfiddle。

Answer 1

在你的html中进行更改，如：

<div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div>
</div>

或

<div class="container">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>

在使用display:inline-block

时删除box div之间的空格

<强> Working Fiddle

<强> More info

Answer 2

您应该考虑使用css3的flex-box方法，这将解决您遇到的问题。

使用您的示例：

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

和css：

.container {
  display: flex;
  flex-wrap: wrap;
  height: 50%;
  min-height: 250px; // for example, to give a minimum height
}
.box {
  flex: 1 1 50%;
  background: green;
  border-top: solid 1px #000;
}
.box:nth-child(odd) {
  background: red;
  flex: 0 0 50%;
}

比其他解决方案更清洁，更容易。 jsfiddle链接到这里。

Answer 3

您需要在容器上设置font-size：0以删除空白区域。或者删除代码中的空格。

如果您想了解更多有关此内容的信息，请阅读

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

＆＃13;

.container{
  width:600px;
  height:700px;
  position:relative;
  font-size: 0;
}
.box{
  display:inline-block;
  width:50%;
  height:50%;
  background:red;
}

＆＃13;

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

＆＃13;

Answer 4

可能会出现此问题，因为每个框之间都有空格，请尝试此

<div class="container">
<div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div>
</div>

我还没有尝试过，但它应该摆脱空白。

Answer 5

＆＃13;

.container{
  width:600px;
  height:700px;
  position:relative;
  
  display:flex;
  flex-direction:column;
}

.row{
 display:flex;
 flex-direction:row;
 height:100%;
 width:100%;
}
.box{
  background-color:red;
  height:50%;
  width:50%;
  border:1px solid #333;
}

＆＃13;

<div class="container">

<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>

<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>


</div>

＆＃13;

使用 flex ，您可以轻松灵活地处理所有这些事情。
有关flex css-tricks.com的更多信息
检查fiddle以查找问题的解决方案。
和
检查此fiddle以获得更具响应性的设计。

在不使用float的情况下将div对齐

5 个答案: