固定寬度的側邊欄在響應式設計不工作爲什麼？

對於它不工作，因爲它應該工作原因不明..固定寬度的側邊欄在響應式設計不工作爲什麼？

我使用這個代碼爲例：

<div id="wrap"> 
    <div id="header">Header</div> 
    <div id="sidebar">Static LEFT sidebar</div> 
    <div id="content">Main content: fluid div.<br/>Width is automatically adjusted between 300px and 700px</div> 
    <div id="footer">Footer</div> 
</div> 

#wrap { margin: 0px; padding: 10px; max-width:1000px; min-width:500px; margin: 0 auto;} 

#header {background: #0f0;} 

#sidebar {width: 200px; float: left; height: 200px; background: #ddd;} 

#content {margin-left: 210px; min-height: 100px; background: #ddd;} 

#footer {clear:both; background: #0f0;}

jsfiddle example（應該是如何工作的，這是）

那裏你可以看到側邊欄完全在下面？爲什麼？

有什麼不對？

謝謝

來源

2017-06-25 maca

你在代碼中最後一個div是不正確的。更改你的問題的代碼部分。 –

代碼在哪裏？ jsfiddle或？ – maca

如果複製粘貼，試試這個

<div id="wrap"> 
    <div id="header">Header</div> 
    <div id="sidebar">Static LEFT sidebar</div> 
    <div id="content">Main content: fluid div.<br/>Width is automatically adjusted between 300px and 700px</div> 
    <div> <!--closed div here--> 

<style type="text/css"> <!--added style tag--> 
#wrap { margin: 0px; padding: 10px; max-width:1000px; min-width:500px; margin: 0 auto;} 

#header {background: #0f0;} 

#sidebar {width: 200px; float: left; height: 200px; background: #ddd;} 

#content {margin-left: 210px; min-height: 100px; background: #ddd;} 

#footer {clear:both; background: #0f0;} 
</style>

編輯您的代碼將無法正常工作：我不應該這樣做，但在這裏，這將爲其工作，代碼，您

#page-body-inner { 

    padding: 0 5px 0 0; 
    float: left; 
    width: 80%; 
} 

#sidebar{ 
    float: left; 
    width: 20%; 
    box-sizing: border-box; 
}

添加自己的CSS代碼到各自的標識，上面的代碼將放在讓你的div側

來源

2017-06-25 05:56:44

你讀過這個問題，看看例子嗎？ – maca

我看到了小提琴中的代碼並更正了您的代碼，請檢查 –

jsfiddle代碼是否正常...您應該看到現場示例。 – maca

-1

啦免費統計保證金右：260px，屬於DIV whitch ID是頁面身體內

來源

2017-06-25 06:12:11

和我得到了什麼？ – maca

你的側邊欄將是正確的方向。 –

有三個問題在你的CSS：

您已經爲#page-body-inner格指定margin-right: 260px;。擺脫這一點。
您需要將float: left;添加到您的#page-body-inner格。
最後，#page-body-inner div的寬度太大，所以側欄和div不能放入單個行中。嘗試減小寬度。

來源

2017-06-25 06:16:51 DawnBringer

基本上不能指望你的側邊欄會從右側浮動主容器框，如果你定義了margin-right：265px;爲您的主要容器。這意味着這個區域已經被主容器佔用，不可能在那邊放置側欄。

而不是這樣做，你應該嘗試設置兩個塊的正確寬度。例如：

 

    #page-body-inner { 
     float: left; 
     width: calc(100% - 260px); 
     margin-right: 0; 
    }

 

    #sidebar { 
     float: left; 
    }

來源

2017-06-25 06:51:16

但這裏的工作方式如下：http://jsfiddle.net/56erp1my/20/ – maca

如果你將你的側邊欄放在第一位，它會工作，是的。但是，如果您將邊欄作爲第二個元素，則主容器已佔用空間： https://jsfiddle.net/xtgzru3m/ 您的代碼有問題，您不應該這樣做。 –

固定寬度的側邊欄在響應式設計不工作爲什麼？

回答

相關問題