添加float后:左边的布局不是应该的样子

Question

我一直在尝试将两个div容器添加到另一个容器中。一个漂浮在主容器的左侧，另一个漂浮到主容器的右侧。问题是，如果我在第一个div上添加float:left，它就不再包含在主容器中。添加浮动之前：https://i.stack.imgur.com/zlV6D.jpg添加后：https://i.stack.imgur.com/7q4ST.jpgHTML:

<div class="container"> 
<div class="column1">

<div class="rowTop">
<p>Community</p>
</div>
<div class="row">
<div id="leftSide"> 
<h3><a>Disscusion</a></h3>
<p>&#8594 Disscusions about various games like Warframe or HuntShowdown</p>
</div>
<div id="rightSide">
0:Threds
</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="column2">
</div>
</div>

CSS：

.container{
margin:30px;
}
.column1{
width:70%;
float:left;
}
.column2{
width:15%;
float:right;
padding:2px;
}
.rowTop{
background-color: rgb(0, 51, 0);
border:1px solid white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
width:10%;
text-align: center;
text-shadow: black 1px 1px;
color:white;
}
.row{
background-color: black;
border:1px solid white;
color:white;
display: block;
padding:0;
}
.row #leftSide{
color:white;
float: left;
margin-right: 0;
width: 55%;
}

提前感谢您的帮助。请不要给我任何仇恨，我是编码的新手：3

Answer 1

您可以为此使用Flexbox。查看CSS指南。只需将显示更改为flex:

.row{
background-color: black;
border:1px solid white;
color:white;
display: flex;
flex-direction: row
padding:0;
}