html - 如何仅当右侧有元素时才在 HTML 元素中设置边距

Question

我的问题是:如何在两个元素之间放置边距，而不会使它们在较小的屏幕上错位？

我正在创建一个 HTML 页面，其中 2 个元素沿一条线排列，如下所示:

我让它响应，所以当我有一个较小的屏幕时，元素被包装到另一行:

这是一个 fiddle :https://jsfiddle.net/5ye2sc4b/1/

HTML:

<div class="container">
    <div class="header">Header</div>
    <div class="line">
        <div class="element element1">Element 1</div>
        <div class="element element2">Element 2</div>
    </div>
    <div class="footer">Footer</div>
</div>

CSS:

.container {
     display:flex;
     flex-direction: column;
     margin-top: 10px;
 }

.header, .footer {
  background-color: lightblue;
  padding: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.line {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.element {
  border: 1px solid gray;
  flex-grow: 1;
  height: 100px;
}

如果我在元素 1 中放置右边距，它将在更大的屏幕上正确显示:

element1 { margin-right: 20px; }

但在较小的屏幕上它会与标题不对齐:

在上面的 fiddler 上，我放置了一些按钮来更改全局容器大小，以模拟问题。

Answer 1

虽然我认为您的方法不是创建响应式布局的最佳方式，但您可能希望简单地删除较小屏幕上的边距:

@media (max-width: 620px) {
margin-right: 0px
}