css - 响应式，可折叠HTML5 spacer div

Question

这个问题是关于我要使用spacer div伪造的最大保证金。

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

为每个图像设置margin-left属性会使图像溢出，尤其是在移动设备上，我想避免这种情况。
因此，我改为使用指定的最大宽度创建了一个div分隔符，认为如果用户调整窗口大小，该分隔符会收缩和折叠，但是它不起作用，而且我现在也不知道为什么。

.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;
}

<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>

因此，使用此设置，我必须用空格填充空白以提供宽度。这种方法已经很糟糕了，但是即使我将窗口做得很小，隔离片仍会保持其初始大小。

如果有人可以给我小费，那将是很好的。

谢谢！

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;，这将使元素在500px上使用100％停止，但将使用所有小于该值的空间。
删除了相对样式。这是不必要的。
已删除 overflow: auto。这是不必要的。
max-width的 .image从100％更改为55％。这意味着在 .spacer和 .image之间，它们的总和为100％。
添加了 .image img。这引起了一个问题，图像正在逃离它的容器并影响页面调整大小的方式。


更新以下 @Rob条评论

使用类似于我上面提到的代码。只需添加 margin-left: 55%;。

请参见下面的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;
	margin-left: 45%;
}
.image img {width: 100%;}

<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>

除了不需要使用注释或间隔div之外，这将具有完全相同的结果。

无论您希望间隔器具有什么宽度，只要将 margin-left设置为具有相等的值即可。