邊欄寬度問題

我開始向您展示我的「網站」。邊欄寬度問題

My Problem 「我的問題」

頭將總是與1140px的寬度居中。
主要內容將具有〜70％的寬度和912px的最大寬度。

我的問題是側邊欄不會保持它的正確寬度。

如果你看看「設計」決議中的網站，它看起來是正確的，但如果你讓窗口更大，它不會遵循。它應該始終保持，因此邊欄內容始終位於標題左邊緣的「內部」。

我將如何實現這一目標？
側邊欄的寬度爲〜23％，如果將窗口保持在1300像素寬（這是設計的寬度），它看起來很正確。

來源

2013-10-09 Daniel

這將是更容易幫助你，如果你提供你的HTML/CSS代碼，最好在[小提琴]（http://jsfiddle.net/）格式 – Stellaire

它看起來像這樣：http://jsfiddle.net/gx4jb/20/ 不能做它exac因爲它導致divs消失。側邊欄是絕對定位的，主div有空白邊緣，所以它始終處於正確的播放狀態（與標題右邊緣內聯）。 – Daniel

如果我正確理解您的要求，我不認爲有可能創建一個響應式佈局。如果中心標題可以小於1140像素，而主內容和側邊欄設置爲具有百分比寬度，那麼始終有可能側邊欄+主內容比標題寬，因此側邊欄的左側將會總是在標題的左邊緣「外」。 – Stellaire

根據您所述的要求，標題的最小寬度爲1140px，因此我的「解決方案」基於該數字。爲了獲得全面的響應，這實際上應該是使用％和媒體查詢。

通過使用一些額外的包裝，我想我們可以管理你以後的東西。

**基本HTML **

<header> 
    <div class="inner"> 
    THIS IS MY HEADER AREA 
    </div> 
</header> 

<div class="nav"> 
    <div class="inner"> 
    THIS IS MY NAV BAR 
</div> 
</div> 

    <aside> 
    ASIDE 
    </aside> 

<div class="inner clearfix"> 

    <div class="content"> 
    CONTENT 
    </div> 
</div>

** ** CSS（包括一些顏色，所以你可以看到ahat正在發生的事情。

* { 
    box-sizing:border-box; 
    margin:0; 
    padding:0; 
} 

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

html { 
    text-align:center; 
    font-weight: bold; 
} 

header { 
    height:50px; 
    line-height:50px; 
    background:lightgreen; 
} 

.inner { 
    width:1140px; 
    margin:0 auto; 
    position:relative; 
    } 

header .inner { 
    background:lightblue; 
} 

.nav { 
    height:50px; 
    background:pink; 
    line-height:50px; 
} 

.nav .inner { 
    background:NavajoWhite; 
} 



aside { 
    width:20%; 
    min-width:218px; 
    height:400px; 
    background:blue; 
    margin-top:10px; 
    position:absolute; 
    left:10px; 

} 

.content{ 
    height:450px; 
    background-color: orange; 
    width:70%; 
    float:right; 
    max-width:912px; 
    margin-top:10px; 
}

Codepen Example

來源

2013-10-09 11:33:20

問題是，該網站的最大寬度爲1140.所以標題永遠不會大於1140，但它可以變小。主要內容不能大於912px，但可以變小。所以問題在於側邊欄停留在左側，並在側邊欄和主div之間留下很大差距。 – Daniel

好的，那麼你肯定會需要一些媒體查詢來改變'.content' div的％寬度。目前，只需將'.inner' div的寬度更改爲1140的最大寬度，就可以使頁面非常靈敏。 http://codepen.io/Paulie-D/pen/Aghba你想要這樣做有多小？ –

邊欄寬度問題

回答

相關問題