Question

我正在尝试使用以下行为创建几个弹性框... 1）Flex框1在更宽的屏幕分辨率下显示带有文本的图像 2）Flex框2在更宽的屏幕分辨率下显示带有文本的图像 3）Flex框1和2在图像顶部叠加文本以获得更小的屏幕分辨率

到目前为止，我的代码适用于方案1）和2）。然而，对于场景3），当我希望它们彼此堆叠时，具有文本覆盖的图像彼此重叠。

对于如何解决的任何建议都将非常感激。

由于彼得

.imgtxtrow {
  display: flex;
  position: relative; 
}

.imgtxtcol {
  display: flex;
  position: relative; 
  flex-direction: column;
}

.subitem {
  width: 50%;
}

img {
  width: 100%;
}

.text {
  padding: 25px;
}

@media screen and (max-width: 750px) {
.subitem {
  position: absolute;
}

<html>

	<head>
		<link rel="stylesheet" href="test.css">
	</head>

	<body>

		<div class="imgtxtrow">
			<div class="subitem">
				<div class="picture">		
					<img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_1280.jpg">
				</div>
			</div>
			<div class="subitem">
				<div class="text">		
					<h3>Some Text</h3>			
				</div>
			</div>
		</div>

		<div style="clear:both"></div>	
		
		</br></br>

		<div class="imgtxtcol">
			<div class="subitem">
				<div class="picture">		
					<img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_1280.jpg">
				</div>
			</div>
			<div class="subitem">
				<div class="text">		
					<h3>Some Text</h3>			
				</div>
			</div>
		</div>

	</body>

</html>

Answer 1

通过一点点定位非常简单。您的目标是媒体查询中的错误元素。

.imgtxtrow {
  display: flex;
  position: relative; 
}

.imgtxtcol {
  display: flex;
  position: relative; 
  flex-direction: column;
}

.subitem {
  width: 50%;
}

img {
  width: 100%;
}

.text {
  padding: 25px;
}

@media screen and (max-width: 750px) {
.text {
  padding: 25px;
  position: absolute;
  bottom: 0;
  left: 0;
}
  
}

<html>

	<head>
		<link rel="stylesheet" href="test.css">
	</head>

	<body>

		<div class="imgtxtrow">
			<div class="subitem">
				<div class="picture">		
					<img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_1280.jpg">
				</div>
			</div>
			<div class="subitem">
				<div class="text">		
					<h3>Some Text</h3>			
				</div>
			</div>
		</div>

		<div style="clear:both"></div>	
		
		</br></br>

		<div class="imgtxtcol">
			<div class="subitem">
				<div class="picture">		
					<img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_1280.jpg">
				</div>
			</div>
			<div class="subitem">
				<div class="text">		
					<h3>Some Text</h3>			
				</div>
			</div>
		</div>

	</body>

</html>

停止带有文本叠加重叠的弹性框

1 个答案: