Html 将五个div相等地并排对齐

我甚至发现很难正确表达我的问题，所以请容忍我

我有一个div作为页面的主容器。在这个分区中，我想有五个大小和边距相等的分区。然而，当我把一切都算对的时候，第五个div总是跳到下一行

我希望这是有道理的。这是我的代码：

CSS和HTML如下

#内容{
位置：绝对位置；
宽度：1000px；
高度：500px；
左：50%；
最高：50%；
左边距：-500px；
利润上限：-250px；
边框：2px实心#f9423a；
边界半径：10px；
背景色：#3eb1c8；
溢出：隐藏；
}
.书签{
显示：内联块；
宽度：15%；
身高：20%；
左缘：2%；
保证金权利：2%；
利润率最高：2.5%；
边框：1px实心#f9423a；
边界半径：10px；
背景色：#f9423a；
}

---

这是因为您正在使用：

display:inline block

，它将HTML代码中div之间的空格读取为文本空格，就像在单词之间留出空格一样，这会破坏布局

尝试按以下方式更改sintax：

<div>content</div><div>
content2</div><div>
content3</div><div>
content4</div><div>
content5</div>

正文{
保证金：0；
}
div{
文本对齐：居中；
显示：内联块；
宽度：计算（20%-4px）；
/*每次每侧20*5=100-2px*/
边框：2件纯黑；
背景色：红色；
}

content1
内容2
内容3
内容4
content5

阿拉米尔的回答是正确的。没有“好”的方法来处理这个问题。不同的人有不同的方法，但他们都有点老练。我更喜欢这样做的方式是评论如下：

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

基本上，你不希望在一个结束部分和下一个开始部分之间有任何空白。有时，如果我的内容足够短，我会把它们都放在一行上，正如你在下面看到的，但这会使阅读变得更加困难

<div class="bookmark"></div><div class="bookmark"></div><div class="bookmark"></div><div class="bookmark"></div><div class="bookmark"></div>

在这里，我删除了右边距，并将书签div增加到17%

.bookmark {
    display: inline-block;
    width: 17%;
    height: 20%;
    margin-left: 2%;    
    margin-top: 2.5%;
    border: 1px solid #f9423a;
    border-radius: 10px;
    background-color: #f9423a;
}

将此添加到.书签

浮动：左边加上书签宽度的.8，你的计算是不相等的，因为在1个书签分区中，你有15%加上左边和右边的边距，即4%，1个分区的总数是19 x 5=95，所以我加了.8来填充剩余的空白。19.8 x 5=99

.bookmark {
  display: inline-block;
  width: 15.8%;
  height: 20%;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 2.5%;
  border: 1px solid #f9423a;
  border-radius: 10px;
  background-color: #f9423a;
  float: left;
}

---

这似乎不管用。还有其他方法吗，比如，使用显示以外的东西：内联块？你可以用浮点数来做，这是一种更被接受的方法，但这确实奏效了，我会为你上传一个提琴。提琴补充道，检查一下。谢谢你花时间让我成为一个提琴，但这并不能解决我的问题。我可以让我的页面看起来像小提琴，但我希望div之间的最大边距相等，无论我如何计算边距，总有一些错误。当我的边距太小时，边距不相等，当我的边距是正确的计算大小时，第五个div跳到下一行。你想要一行有多少个div？我想要每行五个div这正是我需要的！非常感谢：）

.bookmark {
    display: inline-block;
    width: 17%;
    height: 20%;
    margin-left: 2%;    
    margin-top: 2.5%;
    border: 1px solid #f9423a;
    border-radius: 10px;
    background-color: #f9423a;
}

.bookmark {
  display: inline-block;
  width: 15.8%;
  height: 20%;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 2.5%;
  border: 1px solid #f9423a;
  border-radius: 10px;
  background-color: #f9423a;
  float: left;
}