Css流程元素取剩餘寬度

我拼命嘗試調整div到網站的剩餘空間。Css流程元素取剩餘寬度

我有這樣

<nav> nnn </nav> 
<main> xxx </main> 
<aside> aaa </aside>

在普通筆記本電腦一個HTML，我展示他們像三列：

nnn xxx aaa 
     xxx

但對於手機，我在另一個順序顯示出來，更像是：

nnn xxx 
aaa xxx

所以我在我的CSS中做的是

這個工作只要我給兩個固定的寬度，如每個50％。但我希望nav/aside部分爲170px，main佔用剩餘空間。

在研究過程中，我發現其他的答案，我應該刪除浮動屬性，但是我不能讓旁邊的部分出現在導航和主要部分的權利。

我嘗試了一些不同的顯示樣式，如display：table-cell（但沒有像main的rowspan）或display：inline-block，但我絕對無法使其工作。

希望有人有一個想法，我怎麼能實現這種佈局，而不需要接觸HTML。

來源

2014-10-27 Lisa Haase

桌面的三列布局可以通過顯示錶格/表格單元輕鬆實現。移動佈局，這就需要你安排翻轉C形柱，可以實現如下：

放置三個街區的包裝內
按使用保證金
浮動第一向右包裝與第三塊離開了，使用切緣陰性
浮法第二列權，並使其100％的寬
添加clearfix到包裝拉他們的包裝外（但你不能使用隱藏溢出）

nav { 
 
    background: #CCF; 
 
} 
 
main { 
 
    background: #CCC; 
 
} 
 
aside { 
 
    background: #CFC; 
 
} 
 
@media screen and (max-width: 963px) { 
 
    #wrapper { 
 
    margin-left: 170px; 
 
    } 
 
    #wrapper:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
    } 
 
    nav, aside { 
 
    float: left; 
 
    clear: left; 
 
    margin-left: -170px; 
 
    width: 170px; 
 
    } 
 
    main { 
 
    float: right; 
 
    width: 100%; 
 
    } 
 
}

<div id="wrapper"> 
 
    <nav>nnn</nav> 
 
    <main>xxx<br>xxx</main> 
 
    <aside>aaa</aside> 
 
</div>

來源

2014-10-27 17:52:07

Css流程元素取剩餘寬度

回答

相關問題