如何实现两个盒子并排显示？我的CSS代码存在什么问题？

核心错误点 #

• 宽度总和超标：sidebar宽度设为30%，meat设为90%，两者宽度加起来远超过父容器的100%宽度，直接导致第二个盒子被挤到下一行
• margin额外占用空间：meat设置了margin:10px，即使调整宽度总和到100%，margin的额外空间也会让盒子无法并排
• border属性写法错误：border:15px缺少边框样式（比如solid），这个属性不会生效，正确写法需要包含样式，比如border:15px solid transparent

修正后的float布局代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#plate {
  height: 100%;
  width: 750px;
  margin: 10px auto;
  /* 清除浮动，避免父容器高度塌陷 */
  overflow: hidden;
}

.sidebar {
  border-radius: 25px;
  background: rgba(214, 245, 245, 0.7);
  text-align: center;
  align-items: center;
  
  float: left;
  width: 30%;
  
  border: 15px solid transparent;
  padding: 10px; 
}

.meat {
  border-radius: 25px;
  background: rgba(242, 217, 230, 0.7);
  
  float: left;
  /* 调整宽度，预留sidebar的30% + 自身的margin空间 */
  width: 67%;
  
  /* 只设置左侧margin，避免上下margin干扰 */
  margin: 0 0 0 3%;
  border: 15px solid transparent;
  padding: 10px;
 }

更简洁的Flex布局替代方案 #

如果不想手动计算百分比，推荐用Flex布局，更直观且不易出错：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#plate {
  height: 100%;
  width: 750px;
  margin: 10px auto;
  /* 启用flex布局 */
  display: flex;
  /* 两个盒子之间的间距 */
  gap: 20px;
}

.sidebar {
  border-radius: 25px;
  background: rgba(214, 245, 245, 0.7);
  text-align: center;
  align-items: center;
  
  width: 30%;
  border: 15px solid transparent;
  padding: 10px; 
}

.meat {
  border-radius: 25px;
  background: rgba(242, 217, 230, 0.7);
  
  /* 剩余空间全部分配给meat */
  flex: 1;
  border: 15px solid transparent;
  padding: 10px;
 }

内容的提问来源于stack exchange，提问作者Oozy Bosmer