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 - 如何阻止元素向下移動？

回答

相關問題