3

我有一个页面，其中我有一个内联块中的 div 结构。现在每个块 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       | 
   |                   | 
    -------------------
4

2 回答 2

4

您可以使用媒体查询根据视口的宽度应用 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为您的原始问题提供解决方案。

于 2013-03-07T12:30:03.263 回答
1

margin-bottom可以解决问题，但是，即使所有 div 都在一行上，它也会存在。没有 JavaScript 恕我直言，别无他法：

.innderDiv {
    display:inline-block;
    width: 33%;
    max-width: 300px;
    min-width: 135px;
    border: 1px dashed;
    margin-bottom: 5px;
}

http://jsfiddle.net/ruslans/KNDFE/

于 2013-03-07T12:09:58.603 回答