如何将所有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>