如何做出响应div [英] How to make Responsive div
本文介绍了如何做出响应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屋!
查看全文