如何將我的所有div對齊在一行中？

我看了一堆網站，但沒有一個爲我工作。我可能錯過了一些非常簡單的事情。如何將我的所有div對齊在一行中？

#container { 
    width:100%; 
} 

#one { 
    background-color:blue; 
    width:20%; 
    height:50%; 
} 

#two { 
    background-color:green; 
    width:20%; 
    height:50%; 
} 

#three { 
    background-color:yellow; 
    width:20%; 
    height:50%; 
} 

#four { 
    background-color:orange; 
    width:20%; 
    height:50%; 
} 

#five { 
    background-color:red; 
    width:20%; 
    height:50%; 
}

這就是我想要它看起來像：

它不顯示了很多，我懷疑是因爲身高的50％... 謝謝提前:)

來源

2016-10-23 Senpai Saitama

請提供你所得到的一些截圖，並在油漆或其他編輯器中做出你想要的（ish）。 – Blacksilver

對不起，我不能把一個實際的圖片，我沒有足夠的聲譽 –

下一次，鏈接一imgur。 – Blacksilver

我修改您的代碼一點，但這個應該輸出你在找什麼。

您可以顯示內嵌div，並將它們相對放置一個略微負值的邊距，以使它們每個都佔用20％的寬度。

在你提到要「讓整整50％高」，所以你需要給身體100%高度評論，然後設置的div有50%高度：

html, 
 
body { 
 
    height: 100%; 
 
} 
 
div { 
 
    display: inline-block; 
 
    width: 20%; 
 
    height: 50%; 
 
    position: relative; 
 
    margin: -2px; 
 
} 
 
#one { 
 
    background-color: lightblue; 
 
} 
 
#two { 
 
    background-color: green; 
 
} 
 
#three { 
 
    background-color: yellow; 
 
} 
 
#four { 
 
    background-color: orange; 
 
} 
 
#five { 
 
    background-color: red; 
 
}

<div id="one"> 
 

 
</div> 
 

 
<div id="two"> 
 

 
</div> 
 

 
<div id="three"> 
 

 
</div> 
 

 
<div id="four"> 
 
</div> 
 

 
<div id="five"> 
 

 
</div>

來源

2016-10-23 01:40:41

它的工作，非常感謝：D –

林不知道如果這就是你在問什麼，但也許你只需要

div{float:right;}

來源

2016-10-23 00:45:44

把所有的div在同一行使用

display:inline-block;

如果要顯示在下一行的div，使用

display:block;

默認設置爲阻止;

#container { 
 
width:100%; 
 
    
 
} 
 
#one,#two,#three,#four,#five{ 
 
width:20%; 
 
height:50%; 
 
} 
 
#one { 
 
background-color:blue; 
 
display:inline-block; 
 
} 
 

 
#two { 
 
background-color:green; 
 
display:inline-block; 
 
} 
 
#three { 
 
background-color:yellow; 
 
    display:inline-block; 
 
} 
 
#four { 
 
background-color:orange; 
 
} 
 
#five { 
 
background-color:red; 
 
}

<div id="container"> 
 
    <div id="one"> 
 
    One 
 
    </div> 
 
    <div id="two"> 
 
    Two 
 
    </div> 
 
    <div id="three"> 
 
    Three 
 
    </div> 
 
    <div id="four"> 
 
    four 
 
    </div> 
 
    <div id="five"> 
 
    five 
 
    </div> 
 
</div>

希望它可以幫助

來源

2016-10-23 00:48:04

同樣的東西，不顯示任何東西 –

你能告訴我你的代碼嗎？ –

http://codepen.io/anon/pen/VKgZRp –

你只需要在您的容器中添加浮動留給每個ID。這是一個截斷版本，不需要爲每個單獨的ID添加相同的CSS。

#container #one, #container #two, #container #three, #container #four, #container #five { 
float:left; 
}

，或者您可以使用內嵌式地顯示塊

#container #one, #container #two, #container #three, #container #four, #container #five { 
    display:inline-block; 
    }

。如果任何空間，中間偏左的div了你可以添加文字居中對齊，以保證在容器中的div正確居中。這僅適用於在容器上使用內嵌顯示塊的情況。

#container { 
     text-align:center; 
     }

來源

2016-10-23 00:50:41 SlickRemix

float：left;是我經常去的路線，因爲它處理包裝非常好，尤其是如果你可以用CSS保證div的大小（當然這很容易）。 – HoldOffHunger

沒有顯示任何內容...非常感謝 –

你能舉一個例子嗎？我很樂意協助它的工作。 – SlickRemix

試試這個：

#container { 
 
    width: 100%; 
 
    height: 300px; 
 
    border: 1px solid #000; 
 
} 
 
#container div { 
 
    width: 20%; 
 
    height: 50%; 
 
    float: left; 
 
} 
 
#element-1 { 
 
    background-color: red; 
 
} 
 
#element-2 { 
 
    background-color: blue; 
 
} 
 
#element-3 { 
 
    background-color: pink; 
 
} 
 
#element-4 { 
 
    background-color: yellow; 
 
} 
 
#element-5 { 
 
    background-color: green; 
 
}

<div id="container"> 
 
    <div id="element-1"></div> 
 
    <div id="element-2"></div> 
 
    <div id="element-3"></div> 
 
    <div id="element-4"></div> 
 
    <div id="element-5"></div> 
 
</div>

我已經以某種方式幫助

來源

2016-10-23 01:14:43

這是行得通的，但是有沒有辦法讓它完全達到50％？因爲我希望它在任何設備上都差不多......感謝無論如何：D –

@SenpaiSaitama還有另一種方法是。我對上面的css示例做了一些更新。 –

它並沒有真正改變任何東西，但邊界，使之比以前更短哈哈。非常感謝 –

如何將我的所有div對齊在一行中？

回答

相關問題