Question

我试图在桌面下方保留带有描述的图像，然后移动设备想要将图像放在左边，将描述放在右边......更多的是让所有内容尽可能地保持在首位。

我想桌面上的DIV是：

A A A

B B B

但是在移动设备上：

A B

我让他们在父母那里尝试将他们聚集在一起，但似乎并没有起作用。

＆＃13;

<style>
.pathOption_row {
	display: inline-block;
	position: relative;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
}


.pathOption_block {
	display: inline-block;
	position: relative;
	width: 30%;
	height: 300px;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
}



.pathOption_img {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media only screen and (max-width: 768px) {
.pathOption_block{
	width:70%;
	position: relative;
	text-align: center;
}

.pathOption_image {
	float: left;
	display: inline-block;
	position: absolute;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;

.pathOption_text {
	float: right;



}


.pathOption_img {
	display: inline-block;
	float: left;
	position: relative;
	width: 50%;
	height: 100%;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

</style>

＆＃13;

<div class="pathOption_row">
	<div class="pathOption_block">
		<div class="pathOption_image">
			<a class="pathOption_link" href="X">
				<img class="pathOption_img" src="http://tug.ctan.org/macros/latex/contrib/mwe/example-image-a.png" alt="" />
			</a><!--/.po_link-->
		</div><!--/.pathOption_image-->
		<div class="pathOption_text">
			B
		</div><!--/.pathOption_text-->
	</div><!--/.pathOption_block-->
	
	<div class="pathOption_block">
		<div class="pathOption_image">
			<a class="pathOption_link" href="X">
				<img class="pathOption_img" src="http://tug.ctan.org/macros/latex/contrib/mwe/example-image-a.png" alt="" />
			</a><!--/.po_link-->
		</div><!--/.pathOption_image-->
		<div class="pathOption_text">
			B
		</div><!--/.pathOption_text-->
	</div><!--/.pathOption_block-->

	<div class="pathOption_block">
		<div class="pathOption_image">
			<a class="pathOption_link" href="X">
				<img class="pathOption_img" src="http://tug.ctan.org/macros/latex/contrib/mwe/example-image-a.png" alt="" />
			</a><!--/.po_link-->
		</div><!--/.pathOption_image-->
		<div class="pathOption_text">
			B
		</div><!--/.pathOption_text-->
	</div><!--/.pathOption_block-->

</div><!--/.pathOption_row-->

＆＃13;

Answer 1

这是一个工作小提琴：https://jsfiddle.net/zsvfLy7q/5/

基本上你想垂直包裹As和Bs然后在移动设备上内嵌它们。

.wrapper {
  display: flex;
  flex-direction: column;
} 

@media (min-width:800px) {
  .wrapper {
    flex-direction: row;  
  }  
}

@media (max-width:800px) {
  .block {
    display: flex;
  }  
}

我现在使用的是flexbox，因为它现在是优先考虑的方式，但浮点数可以达到同样的效果，这个想法是一样的。

希望DIV堆叠在桌面上但在移动设备上彼此相邻

1 个答案: