Question

这个问题是关于我试图使用spacer div伪造的最大边距。

我目前正在与cms一起创建一个网站。在网站上，我有一张图片。用户可以在后端指定百分比值，为每张图片提供自定义左边距。

为每张图片设置margin-left属性可能会使图像溢出，尤其是在我想要阻止的移动设备上。所以我改为使用指定的最大宽度制作了一个间隔div，认为如果用户调整窗口大小，间隔符会收缩和折叠，但它不起作用，我现在不知道为什么。

＆＃13;

.spacer{
    display: inline-block;
    position: relative;
    max-width: 45%;
    height: 1px;
    overflow: hidden;
}

#imageContainer{
    display: inline-block;
    position: relative;
    margin-left: 26px;    
    margin-right: 26px;
    max-width: 100%
}

#imageWrapper{
    display: block;
    position: relative;
    overflow: auto;
    max-width: 100%
}

.image{
    display: inline-block;
    position: relative;
    max-width: 100%;
    max-height: 100%;
    margin-bottom: 90px;
    cursor: pointer;
    z-index: 2;
}

＆＃13;

<div id="imageContainer">
    <div id="imageWrapper">
        <div class="spacer" ></div>
        <div class="image">
             <img src="http://lorempixel.com/output/sports-q-c-640-480-10.jpg">
        </div>
    </div>
</div>

＆＃13;

因此，使用此设置，我必须用空格填充间隔符以使其具有宽度。这种方法已经很糟糕了，但是即使我把窗户做得太小，垫片仍保持其初始尺寸。

如果有人能给我一个提示，那就太好了。

谢谢！

Answer 1

我已将CSS代码更改为此。
您可能还需要将HTML代码重构为如下所示。

.spacer {
	display: inline-block;
	width: 45%;
}

#imageContainer {
	display: inline-block;
	margin-left: 26px;    
	margin-right: 26px;
	max-width: 100%
}

#imageWrapper {
	display: block;
	max-width: 100%
}

.image {
	display: inline-block;
	max-width: 55%;
	max-height: 100%;
	margin-bottom: 90px;
	cursor: pointer;
	z-index: 2;
}
.image img {width: 100%;}

<div class="spacer"></div><!--
--><div class="image">
    <img src="http://lorempixel.com/output/sports-q-c-640-480-10.jpg" />
</div>

两个inline-block元素之间的注释意味着你之间不会有4px的差距。在这种情况下，这意味着它们将彼此相邻，因为两个宽度= 100％。

请参阅this question此问题。

值得注意的变化

在max-width样式中将width重命名为.spacer。在方案中使用max-width，例如将元素设置为width: 100%; max-width: 500px;，这将使元素使用100％超过500px，但将使用小于该值的所有空间。
删除了相对样式。这是不必要的。
已移除overflow: auto。这是不必要的。
将max-width的{{1}}从100％更改为55％。这意味着在.image和.spacer之间，它们相加达100％。
已添加.image。这导致了一个问题，即图像正在逃离它的容器并影响页面的大小调整方式。

@Rob评论后更新

使用与上面提到的类似的代码。只需添加.image img。

请参阅下面的CSS及其各自的HTML。

margin-left: 55%;

.spacer {
	display: inline-block;
	width: 45%;
}

#imageContainer {
	display: inline-block;
	margin-left: 26px;    
	margin-right: 26px;
	max-width: 100%
}

#imageWrapper {
	display: block;
	max-width: 100%
}

.image {
	display: inline-block;
	max-width: 55%;
	max-height: 100%;
	margin-bottom: 90px;
	cursor: pointer;
	z-index: 2;
	margin-left: 45%;
}
.image img {width: 100%;}

这将具有完全相同的结果，除非您不需要使用注释或spacer div。

无论你想要什么宽度的间隔，只需将<div id="imageContainer"> <div id="imageWrapper"> <div class="image"> <img src="http://lorempixel.com/output/sports-q-c-640-480-10.jpg"> </div> </div> </div>设置为具有等效值。

响应性，可折叠的HTML5 spacer div

1 个答案:

值得注意的变化

@Rob评论后更新