将五个 div 并排对齐

Question

我什至发现很难正确地表达我的问题，所以请耐心等待。

我有一个 div 作为我页面的主要容器。在那个 div 里面，我想要另外五个 divs，它们具有相同的大小和相同的边距。但是，当我计算正确时，第五个 div 总是跳到下一行。

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

CSS和HTML如下

    #content {
     position: absolute;
     width: 1000px;
     height: 500px;
     left: 50%;
     top: 50%;
     margin-left: -500px;
     margin-top: -250px;
     border: 2px solid #f9423a;
     border-radius: 10px;
     background-color: #3eb1c8;
     overflow: hidden;
    }
    
    .bookmark {
     display: inline-block;
     width: 15%;
     height: 20%;
     margin-left: 2%;
     margin-right: 2%;
     margin-top: 2.5%;
     border: 1px solid #f9423a;
     border-radius: 10px;
     background-color: #f9423a;
    }

<div id="content">
  <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 class="bookmark"></div>
  <div class="bookmark"></div>
  <div class="bookmark"></div>
  <div class="bookmark"></div>
  <div class="bookmark"></div>
</div>

请注意，我只是在使用颜色填充的 divs 来查看它是否有效。

如您所见，它几乎可以正常工作，网上困扰我的是右边的边距比左边多一点。我希望两侧和外部元素之间以及内部元素之间的边距相等。

希望有人能理解我的问题！

Answer 1

这是因为您正在使用：display: inline-block，它将您的 HTML 代码上的 div 之间的白色 space 读取为文字白色 space，就像将space 单词之间，破坏布局。

尝试像这样更改语法：

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

然后，对于 CSS 你可以使用 calc();添加边框，这也会破坏您的布局。像这样：

div {
    width: calc(20% - 4px);//20*5 = 100 - 2px on each side each time
    border: 2px solid black;
}

JS Fiddle

body {
    margin: 0 0 0 0;
}

div {    
    text-align: center;
    display: inline-block;
    width: calc(20% - 4px); 
    /*20*5 = 100 - 2px on each side each time*/
    border: 2px solid black;
    background-color: red;
}

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

Answer 2

Aramil 的回答很好而且正确。没有 "nice" 方法来处理这个问题。不同的人有不同的方法，但都有些hackish。我更喜欢这样做的方式是注释如下：

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

基本上你不希望在一个收盘 div 和下一个开盘 div 之间有任何白色 space。有时，如果我的内容足够短，我会将它们全部放在一行中，如下所示，但这会使阅读变得更加困难。

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

Answer 3

check this example, if this is what you wanted

我在这里删除了右边距并将书签 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;
}

https://jsfiddle.net/0gkfp7zr/

Answer 4

将此添加到 .bookmark

float:left 和 add .8 到书签的宽度，你的计算不相等，因为在 1 个书签 div 你有 15% 加上 margin-left 和 right 是 4%，总计1 div 是 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 并排对齐

align five divs equally next to each other

html

css

margin