Question

基本上是橙色显示，我希望后容器div漂浮在最后一个div的底部，而不是那里的那个空间...。您可以在这里看到我在说什么： https://www.w3schools.com/code/tryit.asp?filename=G3BB7OOL4L4J

代码如下：

.mainframe {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
  //margin-left:10%;
  //margin-right:10%;
  //padding-left:10%;
  //padding-right:10%;
  max-width:100%;
  margin:auto;
  //border-style: none,solid,none,solid;
}

#top1 {
	background-color:purple;
        min-width:100%;
	flex-basis: 150px;
        flex-grow:1;
        border-bottom: 2px solid black;
	height:40px;
	
}
#top2 {
	background-color:red;
        min-width:100%;
	flex-basis: 150px;
        flex-grow:1;
	border-bottom: 2px solid black;
	height:20px;
	
}

#top3 {
	background-color:teal;
        min-width:100%;
	flex-basis: 150px;
        flex-grow:1;
	border-bottom: 2px solid black;
	height:20px;
	
}

.postcontainer {
	background-color:orange;
        min-width:49%;
	flex-basis: 50%;
        flex-grow:1;

	//border-bottom: 2px solid red;
	//border-left: 2px solid red;
	//border-right: 2px solid red;
	//min-height:20px;
	float:top;
	
}
.post1 {
	background-color:blue;
	
}
.post2 {
	background-color:gray;

	
}

<body style="background-color:grey;">
    <div class='mainframe'>
        <div id='top1'>page title</div>
        <div id='top2'>search bar</div>
        <div id='top3'>cat name | cat name| cat name</div>
        <div class='postcontainer'>
           <div class='post1'>post title</div>
           <div class='post2'>post content
            post content
            post contentpost content
            post contenpost content
            post contenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost content
            post contenpost content
            post conten
           </div>
        </div>
        <div class='postcontainer'>
           <div class='post1'>post title</div>
           <div class='post2'>post content
            post content
            post contentpost content
            post contenpost content
            post contenpost content
            post contennpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost contnpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost contpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost content
            post contenpost content
            post conten
           </div>
        </div>
        <div class='postcontainer'>
           <div class='post1'>post title</div>
           <div class='post2'>post content
            post content
            post contentpost content
            post contenpost content
            post contenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content contenpost content
            post cnpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost contnpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost contnpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost contontenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost content
            post contenpost content
            post conten
           </div>
        </div>
        <div class='postcontainer'>
           <div class='post1'>post title</div>
           <div class='post2'>post content
            post content
            post contentpost content
            post contenpost content
            post contenpost content
            post cont contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost contentenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost conteontenpost content
            post contenpost content
            post contenpost content
            post contenpost content
            post conten
           </div>
        </div>
   </div>
</body>

https://www.w3schools.com/code/tryit.asp?filename=G3BB7OOL4L4J 看起来我的帖子大部分是代码，但这是一个简单的问题。这是更多使它变得有趣的文字。谢谢

将Flexbox浮动到底部或顶部

0 个答案: