Css float div的自动展开和自动SHIRINK？

我展示了一排大小相同的照片，当一排照片数量不足时，照片应该扩大宽度以占据全部空间。可以有3个内分区或4个内分区

// CSS Section

    .cont {
    position : absolute;
    background : #E4EDF7;
    border : 1px solid grey;
    height: 200px;
    width:400px;
    }   

    .ibox {
    float: left;
    background : green;
    margin: 5px;
    border: 1px solid grey;
    height: 50px;
    width: 100px;   
    }

// HTML Markup

    <div class="cont"> 
        <div class="ibox"></div>
        <div class="ibox"></div>
        <div class="ibox"></div>
        <div class="ibox"></div>
        <div class="ibox"></div>
    </div>

//CSS部分
续{
位置：绝对位置；
背景：#E4EDF7；
边框：1px纯灰；
高度：200px；
宽度：400px；
}   
.ibox{
浮动：左；
背景：绿色；
保证金：5px；
边框：1px纯灰；
高度：50px；
宽度：100px；
}
//HTML标记

好的，我做了一些实验，找到了一个快速解决自动调整大小问题的方法：

.cont { 
    position : absolute; 
    background : #E4EDF7; 
    border : 1px solid grey; 
    height: 200px; 
    width:400px; 
        display:table;
    }    

在“cont”类中，只需添加最后一位“display:table”；外部框应调整大小

---

添加的内容。

Brains911很好地说明了你对自己真正想要什么的困惑。我将你的“照片”解释为1张（最后一张）宽度扩大的照片，这是下面的原始答案。但是，如果您希望“照片”（复数，全部3）展开，那么我在下面添加了一个CSS3答案

原始答案（CSS2：仅最后一张照片展开） 在您的

ibox

css下面添加以下内容：

.ibox:first-child + .ibox + .ibox:last-child {
   width: 210px; /* 2 x width + 2 x margin */
}

它只针对

ibox

，如果有3个而不是4个，则更改宽度，我不得不修改你的

cont

的

width

，以适应你的页边空白，但你应该明白了

补充答案（CSS3：全部3张照片展开） 将

.ibox

定义中的标准宽度更改为3张照片所需的宽度（我使用了

137px

），然后为4张照片场景添加此css：

.ibox:nth-last-of-type(4),
.ibox:nth-last-of-type(4) ~ .ibox {
    width: 100px;
 }

---

它从末尾开始倒数，如果有4张，它将触发4而不是默认的3张的样式设置。

这个问题有点让人困惑，但我假设如果只有3张而不是4张，您希望一行中的所有照片都相等地展开以填充该行

所以。。由于不知道.ibox div（3或4）的确切数量，除非您可以使用一些css3（如果您需要更旧的浏览器兼容性，这可能不是一个选项），否则仅使用css（据我所知）无法实现这一点

用一点jquery，它会相当快

var container = $('.cont'), 
    iboxCount = container.find('.ibox').length,
    photoWidth = container.width()/iboxCount; //TODO: adjust for margin/padding

container.find('.ibox').css('width',photoWidth); 

---

希望这有帮助。

那么你的问题是什么？您尝试过什么？是使用服务器端语言来创建图像列表，还是全部使用硬编码html？如果您使用的是服务器端语言，您可以做一些数学计算，计算出每个图像可以使用的窗口百分比。我需要一个解决方案，不必仅从前端开始，它还可以是前端和后端的组合。我想您可以通过类.ibox获得元素的数量，然后除以它们的父元素（即cont）宽度乘以数量。为了确保忽略填充、边距和边框，您应该应用框大小：边框框；尽管如此。奇怪的是，如果有“3个内部div或4个内部div”，为什么上面的html标记显示5个？我没有看到仅仅通过添加

display:table

进行任何扩展。请参阅（Firefox）。你在实验中还做了什么吗？@ScottS我检查了你发给我的链接，并添加了额外的一点。看，您仍然没有使用显示：表显示4个单元格宽和3个单元格宽之间的差异，这正是他所要求的。不要通过javascript填充一堆单元格，而是显示一行3和另一行4，以及如何扩展3的宽度以填充与4相同的水平空间。我确实认为有一种方法可以通过

display:table

来实现，但我还没有看到您给我一个工作示例。如果可以的话，我会给你一个投票。@ScottS我查看了你之前的评论，得出了这个结论，请参阅。如果我理解正确，你想知道我将如何调整宽度以分别容纳4个单元格和3个单元格。不太清楚。我想看到的是一个单元格在3个单元格中“自动”展开，以填充4个单元格宽度的空间。OP要求“当你[sic]一行中没有足够数量的照片时[即，当它是3张照片时]，照片[emphasis added]应该扩展宽度以占据全部空间。”基本上，使用

display:table

，你能让它看起来像我的示例之一（或）？我不知道OP想要什么，因为他在给出答案后从未接受任何人的答案或进一步的评论。感谢你对“困惑”的提醒，你的解释肯定与我不同，所以我更新了我的答案以适应这两种阅读。我确实用CSS3做了同样的宽度，但不是用你在回答中提到的灵活的盒子模型。干得好！从未使用过最后一种类型。很酷，它倒过来了。获得投票权。