我有这个HTML

  <div class="parent">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

我希望这些框在同一行中，并且它们是相等的。因此，我将父div设置为100%宽度，而在我的项中设置为33.%.

SO 3×33.3=99.9。

  <div class="parent">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

应该在父窗口内传递，父窗口的宽度为整个窗口的100%。

但是3号盒子在2号盒子旁边。为什么？

---

顺晟科技：

将父框的字体大小设置为0。每个内联块div之间的空白会导致最后一个div转到下一行。但是，一定要给每个内联块div指定它们自己的常规字体大小，这样它们的任何文本都不是不可见的。

此外，请确保内联块div具有“box-sizing：border-box”，以便它们的边框包含在33.3%的宽度中

基本上是:

  <div class="parent">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

更好的方法是使用Flex。

您已经在元素的宽度上添加了其他几个位。边框将添加2px.

浏览器还为页边距/填充添加自己的默认设置。

您经常会在CSS样式表的顶部看到:

  <div class="parent">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

这不仅告诉浏览器不要添加它自己的样式，而且如果样式是在级联中添加的，则填充和边框宽度应该包括在元素的宽度中。例如，如果您将宽度设置为100px，然后添加一些填充，那么它的宽度仍然是100px。这可以使计算实际占用了多少空间变得更加容易。

但是，在内联块的情况下还有一件事--如果在布局中它们之间有空白，浏览器将在它们之间添加一个（小的）空白来并排放置它们。我不知道最终推荐的摆脱这种情况的方法是什么（如果你搜索的话，有很多选择）。这个片段只是去掉了HTML文本中的空白，所以不会出现空白。

可以添加到.box div中，以便宽度中包含1px边框:

  <div class="parent">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>