时间戳

首页 > 解决方案 > 如何在弹性项目之间添加空格（如在装订线中）？

html - 如何在弹性项目之间添加空格（如在装订线中）？

问题描述

我的网页中有两个元素，比如说：

.host {
  display: flex;
  justify-content: spece-between;
}

.left {
  width: 300px;
  margin-bottom: 20px;
}

.right {
  width: 300px;
}
<div class='host'>
  <div class='left'></div>
  <div class='right'></div>
</div>

当主机 div 足够宽时，这会将左右 div 放在同一行。如果主机 div 的宽度小于 600px，则换行。

问题是我想在左右div之间添加一个边距，否则当主机的宽度精确为600px时，两者之间没有空间。

我不能简单地margin-right向左 div 添加一个，因为这会使两个元素在行被换行时具有不同的宽度。

是否有一些优雅的解决方案来实现这一目标？

谢谢！

标签： htmlcssflexboxcss-grid

解决方案

推荐阅读