Question

我正在尝试在网页上实现如下所示的结构 https://www.figma.com/file/NfikH1inSqCgwXOSzb3VeDCW/Untitled?node-id=0%3A1

因此，全宽为最大宽度1600px。问题是，使其具有响应能力已经变得非常复杂。原因是，所有框的宽度均以百分比为单位。因此，第一整个部分分为两部分：左50％-右50％。

还剩50％的内容–我通过提供50％的宽度添加了4张图片

内部50％正确–我通过提供100％的宽度添加了1张图片

如果我们仅在这种结构中使用图像，那么在我减小屏幕尺寸的情况下，它将保持非常快速的响应。但是，由于在每个图像下方添加了文本，因此包含文本的框的宽度固定为（66px）。当我们减小屏幕尺寸时，这会干扰布局的响应速度。

有什么解决方案可以使其响应迅速？我尝试将文本框作为图像的覆盖层，因此将图像的绝对底部定位可解决问题，但图像的底部位于文本框的后面。我想确保图像保持完全可见，文本框也保持在图像下方。

有什么想法吗？如果有一个好的解决方案，我也很高兴使用JS。

Answer 1

*{
  box-sizing: border-box;
}
.fifty {
			width: 50%;
			padding-bottom: 66px;
			position: relative;
		}
		.parent {
			display: flex;
			flex-wrap: wrap;
		}
		img {
			width: 100%;
			height: 100%;
		}
		.left {
			display: flex;
			flex-wrap: wrap;
		}
		p {
			position: absolute;
			left: 50%;
			bottom: 10px;
			transform: translateX(-50%);
		}
		.pb-0 {
			padding-bottom: 0;
		}
    .child {
      border: 1px solid #333;
    }

<div class="parent">
	<div class="left fifty pb-0">
		<div class="fifty  child">
			<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
			<p>Text</p>
		</div>
		<div class="fifty  child">
			<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
			<p>Text</p> 
		</div>
		<div class="fifty  child">
			<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
			<p>Text</p> 
		</div>
		<div class="fifty  child">
			<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
			<p>Text</p> 
		</div>
	</div>
	<div class="right fifty child">
		<img src="https://dummyimage.com/350x250/ffa0a0/ffa0a0" alt="image"/>
		<p>Text Right</p>
	</div>
</div>

我认为您想要这样的东西，如果还有其他需要，请告诉我

尝试使用CSS实现响应式盒装结构

1 个答案: