gpt4 book ai didi

html - div 相同的周围边距

转载 作者:太空宇宙 更新时间:2023-11-04 03:26:07 24 4
gpt4 key购买 nike

我希望容器内的 div 距离相等。

检查我在其中创建的 fiddle ,其中有一个主容器,里面有两个 div。我怎样才能让它像图像 div 之间的边距和 div 的左右边距一样?

http://jsfiddle.net/5b73gew0/

<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 中居中对齐,但它们之间的边距也相等。

边距:也可以说成间距

最佳答案

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

(对于 2 个元素,第一个 img 1 的左侧有 1 个,右侧有 1 个),如下所示:[margin] image1 [margin] image2 [margin]

然后您需要将完整的边距仅应用到第一个 img 的左侧和第二个图像的右侧,然后仅将 dMargin 的一半应用到其余部分(因为 img1 的右侧和左侧img2 需要是 dMargin 的一半,这样它加起来就是完整的 dMargin)。

这将有效地均匀分布所有元素,如下所示:

代码片段:

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();
});
#main {
width: 100%;
}
.image {
float:left;
}
body {
margin:0;
}
<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>

或工作 JSFiddle:http://jsfiddle.net/xzrn7n6p/1/

关于html - div 相同的周围边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27064583/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com