如何摆脱带有浮动项目的容器右侧的空白空间？ [英] How to get rid of empty space on the right of a container with floating items?

问题描述

当我在容器中使用浮动广告时，像：

代码（

对。是否有一种方法使容器真的是浮动的孩子的宽度，即使我调整它的大小吗？

解决方案

如果jQuery是一个选项，我会做这样的事情;

  $（'body'）。on（'resize'，function ）{
 var width = document.documentElement.clientWidth || window.innerWidth，
 itemWidth = 150 + 20 + 6; // width + margin + border，
 count = Math.floor width / itemWidth），
 containerWidth = itemWidth * count; 
 
 $（'。container'）css（'width'，containerWidth +'px'）; 
} ; 
  

//未经测试的代码警告

When I use floating itens inside a container, like:

The Code (http://jsfiddle.net/tombrito/gx7kL330/7/):

.container {
  background: blue;
  position: absolute;
  width: auto;
}
.floating-box {
  float: left;
  width: 150px;
  height: 75px;
  margin: 10px;
  border: 3px solid #73AD21;  
}

<div class="container">
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
</div>

...if I resize the window, I see that the width: auto of the container is not exactly the width of the contents:

There is some empty space on the right. Is there a way to make the container really be the width of the floating children, even when I resize it?

解决方案

If jQuery is an option, I would do something like this;

$('body').on('resize', function () { 
    var width = document.documentElement.clientWidth || window.innerWidth,
        itemWidth = 150 + 20 + 6; //width + margin + border,
        count = Math.floor(width / itemWidth),
        containerWidth = itemWidth * count;

    $('.container').css('width', containerWidth + 'px'); 
});

// untested code warning

这篇关于如何摆脱带有浮动项目的容器右侧的空白空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！