對齊五個divs彼此相鄰

我甚至覺得很難說出我的問題，所以請在這裏忍受我。對齊五個divs彼此相鄰

我有一個div用作我的頁面的主容器。在那個div裏面，我希望有另外五個具有相同尺寸和相同邊距的div。然而，當我計算一切正確時，第五個div總是跳到下一行。

我希望這是有道理的。這是我的代碼：

CSS和HTML如下

#content { 
 
    \t position: absolute; 
 
    \t width: 1000px; 
 
    \t height: 500px; 
 
    \t left: 50%; 
 
    \t top: 50%; 
 
    \t margin-left: -500px; 
 
    \t margin-top: -250px; 
 
    \t border: 2px solid #f9423a; 
 
    \t border-radius: 10px; 
 
    \t background-color: #3eb1c8; 
 
    \t overflow: hidden; 
 
    } 
 
    
 
    .bookmark { 
 
    \t display: inline-block; 
 
    \t width: 15%; 
 
    \t height: 20%; 
 
    \t margin-left: 2%; 
 
    \t margin-right: 2%; 
 
    \t margin-top: 2.5%; 
 
    \t border: 1px solid #f9423a; 
 
    \t border-radius: 10px; 
 
    \t 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的工作，看看它的工作。

正如你可以看到它幾乎可以工作，困擾我的在線事情是右邊的餘量比左邊多一點。我希望在邊和外部元素之間以及內部元素之間有相等的邊距。

我希望有人能夠理解我的問題！

來源

2015-06-05 Remco Van Gestel

你想連續有多少個div？ – Mustaghees

我想每行 –

check this example, if this is what you wanted

在這裏，我已經刪除了右邊距並用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/

來源

2015-06-05 04:30:59

這正是我所需要的！非常感謝你：） –

這是因爲您使用的是：display: inline-block，它將HTML代碼中的div之間的空白讀取爲文字空格，就像在文字之間放置空格一樣，會破壞佈局。

試着改變你的sintax這樣的：

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

然後，對於CSS，你可以使用計算（）;添加邊框，這也會破壞你的佈局。像這樣：

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>

來源

2015-06-05 04:13:20

五個div似乎並沒有伎倆。是否有另一種方式，比如使用除display之外的其他內容：inline-block？ –

你可以用浮動，它更可接受的方式做到這一點，但這確實有把戲，我會爲你上傳一個小提琴 –

JSFiddle補充說，檢查一下 –

阿拉米爾的答案是好的，正確無誤。沒有「好」的方法來解決這個問題。不同的人有不同的方法，但他們都有點ha。。我喜歡這樣做的方式有以下評論：

<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>

來源

2015-06-05 04:19:07 kojow7

內容添加到.bookmark

浮動：左和添加。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; 
}

來源

2015-06-05 05:54:05 Henry

對齊五個divs彼此相鄰

回答

相關問題