Question

我希望容器内的div处于相同的距离。

检查我在其中创建的小提琴，其中有一个主容器，里面有两个div。我怎么能像图像div之间的边距和div右边和左边的边距一样？

<div id="main">
    <div class="image">
        <img src="https://lh4.googleusercontent.com/-ptcuEsGVB4I/AAAAAAAAAAI/AAAAAAAABQM/WKCwt2vYBko/s46-c-k-no/photo.jpg" />
    </div>
    <div class="image">
        <img src="https://lh4.googleusercontent.com/-ptcuEsGVB4I/AAAAAAAAAAI/AAAAAAAABQM/WKCwt2vYBko/s46-c-k-no/photo.jpg" />
    </div>
</div>

#main{
    width: 100%;
}
.image{
    float: left;
    margin: auto;
}

更新：正如你们所有人都评论说我不清楚我想要实现的目标，所以这里有更多的解释：

[margin] image-div-1 [margin] image-div-2 [margin]

我希望保证金相同，因此2 div将在主div中居中对齐，但它们之间也会有相等的余量。

保证金：您也可以将其称为间距

Answer 1

所以你需要的是将所有imgs宽度放在一起imgWidth然后找到窗口宽度windowWidth，然后确定dMargin - {windowWidth的边距imgWidth 1}}除以imgs + 1

的数量

（对于2个元素，第一个img 1左侧有3个空格1位于它们之间，1个位于右侧），因此：[margin] image1 [margin] image2 [margin]

然后你需要将整个边距仅应用于第一个img的左边和第二个图像的右边，然后只需将dMargin的一半应用到其余部分（因为img1的右边和img2的左边需要成为dMargin的一半，以便它是完整的dMargin）。

这将有效地均匀分布所有元素，如下所示：

代码段：

＆＃13;

function determineMargin() {
    var imgs = $(".image > img");
    var imgWidth = 0;

    for (var i = 0; i < imgs.length; i++) {
        imgWidth += imgs[i].width;
    }

    //Now that we know the spacing the images take up, lets find out the window width

    var windowWidth = $(window).width();

    var dMargin = (windowWidth - imgWidth) / (imgs.length + 1);

    for (i = 0; i < imgs.length; i++) {
        var tempDMargin = dMargin + imgs[i].width / 2;
        if (i == 0) {
            imgs[i].style.marginLeft = dMargin + "px";
            imgs[i].style.marginRight = dMargin / 2 + "px";
        } else if (i == imgs.length) {
            imgs[i].style.marginLeft = dMargin / 2 + "px";
            imgs[i].style.marginRight = dMargin + "px";
        } else {
            imgs[i].style.marginLeft = dMargin / 2 + "px";
            imgs[i].style.marginRight = dMargin / 2 + "px";
        }
    }
}

determineMargin();

$(window).resize(function () {
    determineMargin();
});

＆＃13;

#main {
    width: 100%;
}
.image {
    float:left;
}
body {
    margin:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div class="image">
        <img src="https://lh4.googleusercontent.com/-ptcuEsGVB4I/AAAAAAAAAAI/AAAAAAAABQM/WKCwt2vYBko/s46-c-k-no/photo.jpg" />
    </div>
    <div class="image">
        <img src="https://lh4.googleusercontent.com/-ptcuEsGVB4I/AAAAAAAAAAI/AAAAAAAABQM/WKCwt2vYBko/s46-c-k-no/photo.jpg" />
    </div>
</div>

＆＃13;

或正在使用JSFiddle：http://jsfiddle.net/xzrn7n6p/1/

Answer 2

你的意思是这样的：http://jsfiddle.net/5b73gew0/

无论有多少div，它们之间，右边和左边都会有恒定的边距。

#main{
    width: 100%;
}
.image{
    float: left;
    margin-left: 10px;
}
.last {
    margin-right: 10px;
}

并且最后一个div需要得到：

<div class="image last">
    <img src="https://lh4.googleusercontent.com/-ptcuEsGVB4I/AAAAAAAAAAI/AAAAAAAABQM/WKCwt2vYBko/s46-c-k-no/photo.jpg" />
</div>

Answer 3

我想要得到你想要的东西：http://jsfiddle.net/h9g44Ldx/

#main{
width: 100%;
}
.image{
float: left;
margin: auto 5%;
width:40%;
}
.first
{
 margin-right:0;
}
img{
 margin: auto 0;
 width:46px;
}

划分相同的周边边际

3 个答案: