Question

我甚至发现很难说出我的问题所以请耐心等待。

我有一个div作为我页面的主要容器。在那个div中，我希望有五个其他div具有相同的大小和相等的边距。然而，当我计算一切正确时，第五个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>

请注意，我只是使用颜色填充的div来查看它是否正常工作。

正如你所看到的那样几乎可行，困扰我的在线事情是，右边的边距比左边的边缘要多一些。我希望在边和外部元素之间以及内部元素之间具有相等的边距。

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

Answer 1

这是因为您正在使用：display: inline-block将HTML代码上的div之间的空白区域作为文字空白区域读取，例如在单词之间放置一个空格，从而打破布局。

尝试改变你的sintax：

<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的回答是正确的，也是正确的。没有“好”的方法可以解决这个问题。不同的人有不同的方法，但他们都有点hackish。我喜欢这样做的方式是评论如下：

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

基本上你不希望在一个结束div和下一个开始div之间有任何空格。有时候，如果我的内容足够短，我会将它们放在一行中，如下所示，但这会让它更难阅读。

<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

浮动：左边和添加.8到书签的宽度，你的计算不相等，因为在1个书签div中你有15％加上边距 - 左边和右边是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平等地排列在一起

4 个答案: