展開div以填充父元素，但不超過最大寬度

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就會向上移動到該行中。

正如Clark所說，您將無法同時獲得指定的尺寸和填滿整個屏幕。 寬度為505像素時，將適合兩個div（2x 250，間隔為5像素）。 直到至少610像素寬（3x 200，2x 5像素間隙）時，三個才適合，這意味着div不會填滿屏幕的寬度為105像素。

媒體查詢可能是最好的選擇，但是您的保證金可能必須指定為百分比，而不是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的瀏覽器中使用CSS3列，並將元素包裝到不支持IE 9或更低版本的瀏覽器中的浮動列中。

調整大小可保持項目的長寬比。 幾乎不可能使過渡看上去100％平滑，但根據瀏覽器的不同，看上去也相當平滑。

有一些可用的設置，它們被注釋。

啟動代碼是：

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

由於我的部分動機是增加CSS3使用率和后備方法的學習曲線，因此我很樂意為您提供更多支持。

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

Answer 3

首先，最小寬度為200px，最大寬度為250px：

當屏幕尺寸介於750像素到800像素之間時，最大間距為50像素
當屏幕尺寸在500像素到600像素之間時，最大間距為100像素
當屏幕尺寸介於250像素到400像素之間時，最大間距為150像素

這就是布局的數學原理。

只要您對此表示滿意，也許您可以嘗試進行媒體查詢。

所以像這樣：

.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 個解決方案

解決方案1
4 2012-11-19 00:28:08

解決方案2
1 2012-11-20 00:13:27

解決方案3
0 2012-11-18 00:03:32

展開div以填充父元素，但不超過最大寬度

問題描述

3 個解決方案

解決方案1 4 2012-11-19 00:28:08

解決方案2 1 2012-11-20 00:13:27

解決方案3 0 2012-11-18 00:03:32

解決方案1
4 2012-11-19 00:28:08

解決方案2
1 2012-11-20 00:13:27

解決方案3
0 2012-11-18 00:03:32