将内联块缩小为溢出内容 [英] Make inline-block shrink to contents on overflow

问题描述

我有一个内联块容器，其中有几个其他内联块元素，如下所示：

容器是蓝色背景，红色是元素。一切工作正常，直到有太多的元素，并且内联块必须展开：

内联块容器扩展到主体的整个宽度，但我希望它缩小到其内容的宽度。这是纯粹的CSS可能吗？有点像这样：

JSFiddle

  #container {
 background：blue; 
 display：inline-block; 
} 
 
 .box {
 background：red; 
 display：inline-block; 
 width：100px; 
 height：100px; 
} 
  

哦，容器不能是固定的宽度： p>

解决方案

我相信你正在寻找的是 像这样 ，只有当另一个盒子可以放入/放入时才会调整容器大小，这取决于窗口大小。据我所知，因为CSS不能在基于动态内容的分段（整个盒子的宽度）中缩小比例。

CSS

  #container {
 background：blue; 
 text-align：left; 
 font-size：0; 
 display：inline-block; 
 padding-left：5px; 
 padding-bottom：5px; 
 / * ie6 / 7：* / 
 * display：inline; 
 zoom：1; 
} 
 .box {
 display：inline-block; 
 background：red; 
 height：50px; 
 margin-top：5px; 
 margin-right：5px; 
宽度：100px; 
 height：100px; 
} 
  

和纯javascript

  var boxAmount = 0; 
 var newWidth = 0; 
 setNewWidth（）; 
 
 window.onresize = function（）{
 setNewWidth（）; 
}; 
 
函数setNewWidth（）{
 var outerContainer = document.getElementsByTagName（'body'）[0]; 
 var outerWidth = outerContainer.offsetWidth; 
 var box = document.getElementsByClassName（'box'）; 
 var boxWidth = box [0] .offsetWidth; 
 var innerContainer = document.getElementById（'container'）; 
 var containerPadding = parseInt（window.getComputedStyle（innerContainer，null）.getPropertyValue（'padding-left'），10）
 + parseInt（window.getComputedStyle（innerContainer，null）.getPropertyValue（'padding-正确'），10）; 
 
 boxAmount =（outerWidth  -  containerPadding）/（boxWidth + containerPadding）; 
 boxAmount = Math.floor（boxAmount）; 
 if（boxAmount< = box.length）{
 newWidth = boxAmount * boxWidth + boxAmount * 5; 
} 
 innerContainer.style.width = newWidth +'px'; 
} 
  

这是一个版本，如果箱子周围有另一个容器

这是一个jQuery版本，供有兴趣的人使用

I have an inline-block container, with several other inline-block elements like so:

The container is the blue background, the red the elements. Everything is working fine until there's too many elements and the inline-block has to expand:

The inline-block container expands to the entire width of the body, but I want it to shrink to the width of it's contents. Is this possible with pure CSS? Kinda like this:

JSFiddle

        #container {
            background: blue;
            display: inline-block;
        }

        .box {
            background: red;
            display: inline-block;
            width: 100px;
            height: 100px;
        }

Oh, and the container can't be a fixed width :(

解决方案

I believe what you are looking for is something like this, which resizes the container only if another box can fit/not fit depending on the window size. This functionality is not currently possible in pure CSS as far as I know because CSS can't scale down in segments (the full width of the box) based on dynamic content

The CSS

#container {
    background:blue;
    text-align: left;
    font-size:0;
    display: inline-block;
    padding-left:5px;
    padding-bottom:5px;
    /* for ie6/7: */
    *display: inline;
    zoom:1;
}
.box {
    display:inline-block;
    background:red;
    height:50px;
    margin-top:5px;
    margin-right:5px;
    width: 100px;
    height: 100px;
}

and the pure javascript

var boxAmount = 0;
var newWidth = 0;
setNewWidth();

window.onresize = function () {
    setNewWidth();
};

function setNewWidth() {
    var outerContainer = document.getElementsByTagName('body')[0];
    var outerWidth = outerContainer.offsetWidth;
    var box = document.getElementsByClassName('box');
    var boxWidth = box[0].offsetWidth;
    var innerContainer = document.getElementById('container');
    var containerPadding = parseInt(window.getComputedStyle(innerContainer, null).getPropertyValue('padding-left'), 10) 
    +  parseInt(window.getComputedStyle(innerContainer, null).getPropertyValue('padding-right'), 10);

    boxAmount = (outerWidth - containerPadding) / (boxWidth + containerPadding);
    boxAmount = Math.floor(boxAmount);
    if (boxAmount <= box.length) {
        newWidth = boxAmount * boxWidth + boxAmount * 5;
    }
    innerContainer.style.width = newWidth + 'px';
}

Here is a version if there is another container around the boxes

Here is a jQuery version for those who are interested

这篇关于将内联块缩小为溢出内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！