在不使用浮动和弹性的情况下将 3 个 div 分成 3 列

Question

我尝试通过使用display inline-block来实现 3 列，但第 3 列位于单独的行：

.wrapper {
   width: 100%;
}
.column {
    display: inline-block;
    min-height: 150px;
    width: 33.33%;
    border: 1px solid black;
    min-width: 300px;
    margin-bottom: 8px;
}

<div class="wrapper">
  <div class="column">abc</div>
  <div class="column">def</div>
  <div class="column">ghi</div>
</div>

无法弄清楚原因。

Answer 1

默认情况下inline-block将空间视为一个元素。您可以通过两种不同的方式执行此操作：

1. 方法（使用字体大小）

*,*:after,*:before {
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
  font-size:0px;
}
.column {
  display: inline-block;
  min-height: 150px;
  width: 33.33%;
  border: 1px solid black;
  /*min-width: 300px;*/
  margin-bottom: 8px;
  font-size:16px;
}

<div class="wrapper">
  <div class="column">abc</div>
  <div class="column">def</div>
  <div class="column">ghi</div>
</div>

2. 方法 删除多余空间

*,*:after,*:before {
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
}
.column {
  display: inline-block;
  min-height: 150px;
  width: 33.33%;
  border: 1px solid black;
  /*min-width: 300px;*/
  margin-bottom: 8px;
}

<div class="wrapper">
  <div class="column">abc</div><!--
  --><div class="column">def</div><!--
  --><div class="column">ghi</div>
</div>

根据您的评论，您想要margin-right:5px并实现同样的目标。为此，您可以在calc格式中使用宽度。检查下面的片段

*,*:after,*:before {
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
}
.column {
  display: inline-block;
  min-height: 150px;
  width: calc(33.33% - 5px);
  width: -moz-calc(33.33% - 5px);
  width: -webkit-calc(33.33% - 5px);
  border: 1px solid black;
  /*min-width: 300px;*/
  margin-bottom: 8px;
  margin-right: 5px;
}

<div class="wrapper">
  <div class="column">abc</div><!--
  --><div class="column">def</div><!--
  --><div class="column">ghi</div>
</div>