如何获得响应的div移动

问题描述：

我与我的网站的一个部分挣扎，为了获得用于移动设备也全面响应等网站的其余部分是伟大的它只是本节：如何获得响应的div移动

该网站是：http://dev.strategix.co.za/ 该div所指的是我们的解决方案下的块和右侧内容。

我有块.left2 {width:60%}和右侧内容.right2 {width:40%}但很明显，这是不够的，因为你可以看到在手机上查看。

请有人协助。谢谢！

使用媒体查询使其响应。 – Jai

我看到你使用Wordpress Visual Composer构建它。为什么不使用他们的网格来构建那些.left和.right列？它会自动响应，如网站 –

的其余部分创建一个围绕你想要分离的内容的容器div。你想如何显示它？如果您希望在移动视图中显示.left2在right2上方，请在移动和桌面视图中使用媒体查询进行不同大小调整。“仅限@media屏幕和（最大设备宽度：480px）{}” –

答

我认为float:left会导致你的问题与响应式布局。从.right2中删除它，然后给.left2和.right2样式display:inline-block。

就我所见，其余的都很好。没有利润率，你用border-box，所以看起来不错。

嗨Xahed，内联块似乎工作，我不能使用浮动：留在.left2。然而，某些东西仍然不适合移动设备。可以.right2不放在箱子下面？看起来在手机上占用了很多宽度。 –

然后，您需要使用'inline-block'和_media queries_的混合体，就像这里几个人所建议的那样。谷歌搜索_fluid grid_会出现几个关于如何做到这一点的教程。我认为最好的教程之一是：http：//www.responsivegridsystem.com/。 –

答

在媒体查询试试这个

@media only screen and (max-width: 767px) 
{ 
.left2 { 
width: 100%; 
height: initial; 
} 

.right2 { 
width: 100%; 
} 

.right2 .box2 { 
padding: 2%; 
float: left; 
width: 96%; 
margin-top: -2px; 
} 
}

希望这有助于你。

如何获得响应的div移动

相关推荐