1

我正在尝试在左浮动 div 上设置最小和最大宽度/高度，并让它们扩展以填充父元素（主体）。我想知道是否有办法用 css 实现这一点，如果没有，也许我可以使用一些 JS。

为了想象这种效果，开始调整窗口大小，您会注意到 div 的右侧会有一个空白区域，直到该空间大到足以让一些 div 移入其中。我想做的是让所有 div 扩展以填充空白空间，直到达到最大值，现在是时候在那里弹出更多 div 了，此时 div 的大小将根据行中有多少重新调整.

最后，我希望这些 div 永远不会超过最大宽度或小于最小宽度，而是在这些限制内自我调整以填充身体的整个宽度

这是示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <style>
      .imageitem {
        background-color: blue;
        margin: 0 5px 5px;
        min-width: 200px;
        min-height: 200px;
        max-width: 250px;
        max-height: 250px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
  </body>
</html>
4

3 回答 3

4

您要问的实际上是一个相对复杂的布局，尽管它基本上只是响应式的。本质上，您希望两个 div 扩展以填充屏幕（就像表格中的两个单元格一样），但是一旦屏幕达到一定宽度，第三个 div 就会向上移动到行中。

正如克拉克所说，您将无法同时获得您指定的尺寸并在所有可能的情况下填充屏幕。在 505 像素宽处，可以容纳两个 div（2x 250，间隔 5 像素）。三个不适合，直到至少 610 像素宽（3x 200，2x 5 像素间隙），这意味着有 105 像素的宽度，您的 div 不会填满屏幕。

媒体查询可能是最好的选择，但您的边距可能必须指定为百分比，而不是 5 像素（除非您想在 jQuery 或类似中执行此操作）。

从克拉克的答案修改的是这个小提琴http://jsfiddle.net/UHqWF/2/

body {
    background:#edeee6;
}

.imageitem {
    -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
         box-sizing:border-box;
    float:left;
    max-width:250px;
    min-width:200px;
    padding:5px;
    width:100%;
}

    .imageitem div {
        background:#4e84a4;
        max-height:250px;
        min-height:200px;
    }

@media all and (min-width:420px) {
    .imageitem {
        width:50%;
    }
}

@media all and (min-width:630px) {
    .imageitem {
        width:33.33333%;
    }
}

@media all and (min-width:840px) {
    .imageitem {
        width:25%;
    }
}

@media all and (min-width:1050px) {
    .imageitem {
        width:20%;
    }
}

但是，如上所述，它很跳跃。

更好的解决方案是不施加宽度限制（从而阻止偶尔的右侧间隙），例如http://jsfiddle.net/UHqWF/3/

body {
    background:#edeee6;
}

.imageitem {
    -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
         box-sizing:border-box;
    float:left;
    padding:5px;
    width:100%;
}

    .imageitem div {
        background:#4e84a4;
        min-height:200px;
        text-align:center;
    }

@media all and (min-width:420px) {
    .imageitem {
        width:50%;
    }
}

@media all and (min-width:630px) {
    .imageitem {
        width:33.33333%;
    }
}

@media all and (min-width:840px) {
    .imageitem {
        width:25%;
    }
}

@media all and (min-width:1050px) {
    .imageitem {
        width:20%;
    }
}​

甚至在中心有额外的空间，而不是边缘，例如http://jsfiddle.net/UHqWF/4/

body {
    background:#edeee6;
}

.imageitem {
    -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
         box-sizing:border-box;
    float:left;
    padding:5px;
    width:100%;
}

    .imageitem div {
        background:#4e84a4;
        max-width:250px;
        margin:0 auto;
        min-height:200px;
        text-align:center;
    }

@media all and (min-width:420px) {
    .imageitem {
        width:50%;
    }
}

@media all and (min-width:630px) {
    .imageitem {
        width:33.33333%;
    }
}

@media all and (min-width:840px) {
    .imageitem {
        width:25%;
    }
}

@media all and (min-width:1050px) {
    .imageitem {
        width:20%;
    }
}​
于 2012-11-19T00:28:08.560 回答
1

我创建了一个 jQuery 插件，它在支持它们的浏览器中使用 CSS3 列，并将元素包装到不支持 IE 9 及更低版本的浏览器中的浮动列中。

调整大小保持项目的纵横比。让过渡看起来 100% 流畅几乎是不可能的，但根据浏览器的不同，它看起来相当流畅。

有一些设置可以使用，它们被评论了。

启动代码是：

$('#container').adjustColumns({/* options*/});

由于我的部分动机是增加 CSS3 使用和后备方法的学习曲线，我很乐意提供更多支持。

演示：http: //jsfiddle.net/SbvGJ/show/

于 2012-11-20T00:13:27.823 回答
0

首先，最小宽度为 200px，最大宽度为 250px：

  • 当屏幕尺寸在 750px 和 800px 之间时，会有最大 50px 的间隙
  • 当屏幕尺寸在 500px 和 600px 之间时，会有最大 100px 的间隙
  • 当屏幕尺寸在 250px 和 400px 之间时，会有最大 150px 的间隙

这就是布局的数学原理。

只要您对此感到满意，也许您可​​以尝试媒体查询。

所以是这样的：

.imageitem {
    background-color: blue;
    //For the sake of simplicity, i've set the margin to 0.
    //You will need to redo the maths or restructure your HTML for margins to work
    //Perhaps using an inner div with a margin
    margin: 0px;
    min-width:200px;
    min-height:200px;
    max-width:250px;
    max-height:250px;
    float:left;
}

@media all and (max-width:250px) and (min-width:200px) {
    .imageitem {
        width:100%;
    }
}

@media all and (max-width:500px) and (min-width:400px) {
    .imageitem {
        width:50%;
    }
}

@media all and (max-width:750px) and (min-width:600px) {
    .imageitem {
        width:33%;
    }
}

@media all and (max-width:999px) and (min-width:800px) {
    .imageitem {
        width:25%;
    }
}

@media all and (max-width:1249px) and (min-width:1000px) {
    .imageitem {
        width:20%;
    }
}

如果您还需要调整高度，您可以为 min-height 和 max-height 编写类似的查询。只需确保在html, body选择器上也设置了高度。

于 2012-11-18T00:03:32.613 回答