如何將所有div放在一行？

Question

我看了很多網站，但沒有一個能為我工作。 我可能錯過了一些非常簡單的東西。

#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％...在此先感謝:)

Answer 1

您只需要向容器中的每個id添加float。 這是一個截斷版本，無需為每個單獨的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;
        }

Answer 2

將所有div放在同一行中使用

display:inline-block;

如果想在下一行顯示div，請使用

display:block;

default設置為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> 

希望能幫助到你

Answer 3

我不確定這是你要問的，但也許你只是需要

div{float:right;}

Answer 4

嘗試這個：

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

我以某種方式幫助過

Answer 5

我已經修改了你的代碼，但這應該輸出你要找的東西。

您顯示內聯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>