我做错了什么?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#plate {
height: 100%;
width: 750px;
margin: 10px auto;
}
.sidebar {
border-radius: 25px;
background: rgba(214, 245, 245, 0.7);
text-align: center;
align-items: center;
float: left;
width: 30%;
border: 15px;
padding: 10px;
}
.meat {
border-radius: 25px;
background: rgba(242, 217, 230, 0.7);
float: left;
width: 90%;
margin: 10px;
border: 15px;
padding: 10px;
}
Flexbox
Flexbox 是一种一维布局方法,用于按行或列排列项目。项目可以弯曲(展开)以填充额外的空间或收缩以适应较小的空间。
#plate {
height: 100%;
width: 750px;
margin: 10px auto;
display: flex; /* <-- add this */
}