Question

我在这个网站上找到了以下jsfiddle，其中90％回答了我的查询。

但是我希望能够在内部div上包含边距。我已经尝试修改计算以计算保证金，但是如果没有内部div进入新线路或溢出，我就无法工作。

jquery代码是

var containerW = $('.container').width();
var innerCount = $('.container .inner').length;

$('.inner').css({
    width: containerW / innerCount
})

html是

<div class='container'>
    <div class='inner' style='background : #FF0000;'></div>
    <div class='inner' style='background : #00FF00;'></div>
    <div class='inner' style='background : #0000FF;'></div>
    <div class='inner' style='background : orange;'></div>
</div>

CSS

.container {
    width: 100%;
    height: 150px;
    background : #bbb;
}
.inner {
    float:left;
    height:100%;
    min-width:30px;
}

我只希望能够放置左右边距，以便内部div显示为间隔。

由于

Answer 1

如果您要为.inner类margin:5px;提供保证金，请尝试使用

等js

$('.inner').css({
    width: (containerW / innerCount)-10
})

因为如果我们给margin :5px表示左右5-5，那么对于一个内部div总共10px，所以我们必须从它的宽度减去它;

Answer 2

您可以使用jquery“outerWidth”函数代替设置css宽度。所以，你的jquery代码应该是：

var containerW = $('.container').width();
var innerCount = $('.container .inner').length;
$('.inner').outerWidth(containerW / innerCount, true);

outerWidth中的第二个参数指示是否在宽度计算中包含边距。

父容器div中子div的自动宽度

2 个答案: