Question

我正在尝试在左浮动的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>

Answer 1

你问的实际上是一个相对复杂的布局，虽然它基本上只是响应。基本上你想要，比如两个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%;
    }
}

Answer 2

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

调整大小可保持项目的宽高比。几乎不可能使过渡看起来100％流动到眼睛，但根据浏览器，它看起来相当流畅。

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

要启动的代码是：

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

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

DEMO：http://jsfiddle.net/SbvGJ/show/

Answer 3

首先，最小宽度为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选择器上设置高度。

展开div以填充父元素但不超过最大宽度

3 个答案: