将五个div平等地排列在一起

I'm even finding it difficult to phrase my question right so bear with me here please.

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

I have one div that serves as the main container of my page. Inside that div I would like to have five other divs which have equal size and equal margins. However when I calculate everything right, the fifth div always jumps to the next line.

我有一个div作为我的页面的主要容器。在那个div里面,我希望有五个其他div,它们具有相同的大小和相等的边距。然而,当我计算一切正确时,第五个div总是跳到下一行。

I hope this makes sense. This is my code:

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

CSS and HTML as follows

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>

Note that I'm just working with color-filled divs to see if it's working.

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

As you can see it almost works, the online thing that bothers me is that there's a bit more margin on the right than there is on the left. I would like to have equal margins between the sides and the outer elements, and between the inner elements of course.

你可以看到它几乎可以工作,困扰我的在线事情是,右边的边距比左边的边缘要多一些。我希望在侧面和外部元素之间以及内部元素之间具有相等的边距。

I hope someone understands my question!

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

4 个解决方案

#1

check this example, if this is what you wanted

Here i have removed the right margin and increased the bookmark div with to 17%

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

#2

This is because you are using: display: inline-block which reads the white space between your divs on your HTML code as a literal white space, like putting a space between words, that breaks the layout.

这是因为您正在使用:display:inline-block,它将HTML代码上div的空格读取为文字空格,就像在单词之间放置空格一样,这会打破布局。

Try changing your sintax like this:

尝试改变你的sintax像这样:

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

Then, for the CSS you could use calc(); to add borders, that would ruin your layout too. Like this:

然后,对于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>

#3

Aramil's answer is good and correct correct. There is no "nice" way to deal with this. Different people have different methods, but they are all a bit hackish. The way I prefer to do it is with comments as follows:

Aramil的答案是正确的,也是正确的。没有“好”的方法可以解决这个问题。不同的人有不同的方法,但他们都有点hackish。我喜欢这样做的方式是评论如下:

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

Basically you don't want any white space between one closing div and the next opening div. Sometimes if my content is short enough I will put them all together on one line as you see below, but it makes it much harder to read.

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

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

#4

add this to .bookmark

将此添加到.bookmark

float:left and the add .8 to the width of bookmark, your computation is not equal because in 1 bookmark div you have 15% plus the margin-left and right which is 4%, total of 1 div is 19 x 5 = 95 so I added .8 to fill the remaining white spaces. 19.8 x 5 = 99

float:left和添加.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;
}

#1

check this example, if this is what you wanted