如何獲得響應的div移動

-1

我與我的網站的一個部分掙扎，爲了獲得用於移動設備也全面響應等網站的其餘部分是偉大的它只是本節：如何獲得響應的div移動

該網站是：http://dev.strategix.co.za/ 該div所指的是我們的解決方案下的塊和右側內容。

我有塊.left2 {width:60%}和右側內容.right2 {width:40%}但很明顯，這是不夠的，因爲你可以看到在手機上查看。

請有人協助。謝謝！

來源

2015-10-14 Alister Ho

使用媒體查詢使其響應。 – Jai

我看到你使用Wordpress Visual Composer構建它。爲什麼不使用他們的網格來構建那些.left和.right列？它會自動響應，如網站 –

的其餘部分創建一個圍繞你想要分離的內容的容器div。你想如何顯示它？如果您希望在移動視圖中顯示.left2在right2上方，請在移動和桌面視圖中使用媒體查詢進行不同大小調整。「僅限@media屏幕和（最大設備寬度：480px）{}」 –

我認爲float:left會導致你的問題與響應式佈局。從.right2中刪除它，然後給.left2和.right2樣式display:inline-block。

就我所見，其餘的都很好。沒有利潤率，你用border-box，所以看起來不錯。

來源

2015-10-14 07:43:34

嗨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; 
} 
}

希望這有助於你。

來源

2015-10-14 07:48:17

如何獲得響應的div移動

回答

相關問題