Question

真正基本的问题。但是，如何阻止元素连续下降呢？如何将它们保持在彼此相邻的相同div中？

 .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

Answer 1

你需要使用浮动。

 .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;}

或显示：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;}

Answer 2

您需要在两个框中使用float : right，这些框需要放在一行中。

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

希望有所帮助

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

2 个答案: