CSS - 如何阻止元素向下移动？

-5

真的很基本的问题。但是，我如何阻止这些元素连续下去？我如何让他们在相邻的相同div中？CSS - 如何阻止元素向下移动？

.navcontainer {width: 1300px; margin-left: auto; margin-right: auto; height: 130px; background-color:red;} 
.grid1{width: 33.33%; height: 130px;} 
.grid2{width: 33.33%; margin-left: 33.33%; height: 130px; background-color: blue;} 
.grid3{width: 33.33%; margin-left: 66.66%; height: 130px; background-color: green;}

Screenshot of what I mean

来源

2017-06-13 asdwal

请显示HTML。 – arminb

欢迎来到Stack Overflow！寻求代码帮助的问题必须包含在问题本身中重现**所需的最短代码**最好在[** Stack Snippet **]中（https://blog.stackoverflow.com/2014/09/introducing-runnable） -javascript-CSS-和HTML的代码段/）。请参阅[**如何创建一个最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

你需要使用浮动。

.navcontainer {width: 1300px; margin-left: auto; margin-right: auto; height: 130px; background-color:red;} 
.grid1{width: 33.33%; height: 130px;float:left;} 
.grid2{width: 33.33%; float:left; height: 130px; background-color: blue;} 
.grid3{width: 33.33%; float:left; height: 130px; background-color: green;}

OR display：inline-block;

.navcontainer {width: 1300px; margin-left: auto; margin-right: auto; height: 130px; background-color:red;} 
.grid1{width: 33.33%; height: 130px;display: inline-block;} 
.grid2{width: 33.33%; display: inline-block; height: 130px; background-color: blue;} 
.grid3{width: 33.33%; display: inline-block; height: 130px; background-color: green;}

来源

2017-06-13 15:04:31 tech2017

不要忘记在之后执行'clear：both;'。 – arminb

您需要在这两者你需要把在一个单行的箱子使用float : right。

或者您可以使用position : relative/absolute; left : 0px;，它会使您的盒子位于最左边的位置。

希望它有帮助

来源

2017-06-13 15:06:50

CSS - 如何阻止元素向下移动？

回答

相关问题