html - 由于使用 CSS 更改页面大小而导致 div 重新对齐时动态添加边距

Question

我有一个页面，其中的内联 block 中有一个 div 结构。现在每个 block div 都有一个最小尺寸，当窗口尺寸减小到小于所有内部 div 最小宽度的总和时，我将一些元素移到下一行。我现在想要将填充添加到单独移动到下一行的 div，我不希望使用 js 来实现这一点。我怎样才能只用 CSS 做到这一点？

<div width="100%">
   <div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
   <div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
   <div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
</div>

渲染

---

    -------------------   -------------------  -------------------
   |                   | |                   ||                   |
   |                   | |                   ||                   |
   |     div1          | |     div 2         ||      div 3        |
   |                   | |                   ||                   |
    -------------------   -------------------  -------------------

---

受限空间

---

    -------------------   ------------------- 
   |                   | |                   |
   |                   | |                   |
   |     div1          | |     div 2         |
   |                   | |                   |
    -------------------   ------------------- 
    <^margin 5px inserted^>
    -------------------
   |                   | 
   |                   | 
   |       div 3       | 
   |                   | 
    -------------------  

---

Answer 1

您可以使用媒体查询根据视口(viewport)的宽度应用 CSS 规则。

@media all and (max-width: _width_value_) {
    /* When the screen size is less than or equal to _width_value_ the css rules here will apply */
}

这是一个 jsfiddle为您的原始问题提供解决方案。