如何做出响应div [英] How to make Responsive div

问题描述

我有两个div



| | 1 | 2 | |



style - >

I have two divs

| | 1 | 2 | |

style-->

float:left;width:100%

当我降低屏幕分辨率时会喜欢这个



| | 1 | |

| | 2 | |



如何制作这个



| | 2 | |

| | 1 | |

When I reduce the screen resolution it will like this

| | 1 | |
| | 2 | |

How to make this into

| | 2 | |
| | 1 | |

推荐答案

请参阅下面的代码并使用它。这是100％的工作........

Refer below code and use it. it is 100% working........

<style>
.div_1
{
	float: left;
	min-width: 350px;
	width: 50%;
}
.div_2
{
	float: right;
	min-width: 350px;
	width: 50%;
}

@media screen and (max-width: 800px) {
	.div_2
	{
		float: none;
		min-width: 350px;
		width: 100%;
	}
}
</style>
<div class="div_2">div 2</div>
<div class="div_1">div 1</div>

i不知道您是否正在将设计优化应用于现有网站，或者您正在开发一个新网站



但是如果您正在开发一个新的一个我强烈建议使用BOOTSTRAP而不是重新发明整个想法。



遗憾的是我不会发布链接，因为这可能被视为垃圾邮件。



问候。

Hi,

i don't know if you are applying design optimization to an existing website or you are developing a new one

but if you are developing a new one i would strongly suggest using BOOTSTRAP instead of reinventing the whole think yourself.

unfortunately i will not post a link as this is might be considered as spam.

Regards.

这篇关于如何做出响应div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！