響應式設計錯誤

-2

當我嘗試爲新的響應式佈局網頁設計創建模板時，我非常渴望DIV元素定位錯誤。響應式設計錯誤

的網址是：http://cs.renault-club.cz/responsive_005_bug.php

的問題：當你調整窗口的大小小於800像素，在「sidebar_right」（在線用戶）DIV元素顯示不直接在「obsah」（內容）DIV，但在「sidebar_left」（菜單）DIV元素下彈跳。

請幫助！我已經花了2小時嘗試任何事情，但沒有成功:(

在小於500px的正常工作，以及大於800像素。當前窗口寬度是在左上角顯示。

來源

2016-04-03 Pavel

你有導致其2個媒體查詢來倒推：如果您刪除此

@media screen and (max-width: 800px) 
#obsah { 
    width: 80%; 
}

，並刪除該

@media screen and (max-width: 800px) 
#sidebar_right { 
    width: 50%; 
}

正如你看到它下面將工作：

來源

2016-04-03 00:44:46

好，500和800像素#sidebar_right之間有50％ - 這是太適合其他元素的右側（看起來這在使頂部內嵌定義，在style標籤頁）

來源

2016-04-03 00:45:17 Johannes

我試圖實現這種行爲http://cs.renault-club.cz/responsive_003.php這是一個基於CSS浮動的以前的版本。它工作的很好，但我因爲脆弱而放棄了它。當我在「obsah」DIV元素（主頁面內容容器）中使用某些CSS時會浮動並清除：兩者都會導致整個響應式設計被破壞。所以我將它切換爲顯示：內嵌塊DIV元素。但是現在我意識到，通過使用這種方法，不可能像使用浮動時那樣實現相同的行爲。它只是表現得像一排行元素。無論如何非常感謝你的幫助。 – Pavel

這不是一個錯誤。這是盒子模型的工作原理。嘗試：

#sidebar_left { float:left; }

來源

2016-04-03 00:57:36 xturgorex

xturgorex：非常感謝您的建議。你是對的。我已經意識到它的行爲像一個行 - 行元素。漂浮很好，完全按照我的預期工作，但它太脆弱了。當我使用浮動然後清除：兩者;在「obsah」DIV元素（這是主要內容容器）內部，響應式設計被打破。這就是我嘗試使用display：inline-block元素的原因。 – Pavel

響應式設計錯誤

回答

相關問題