CSS - 從屏幕左側開始側邊欄的佈局（見圖片）

-2

我怎麼能這樣的代碼佈局：http://i.imgur.com/4kgVMJt.png CSS - 從屏幕左側開始側邊欄的佈局（見圖片）

當前代碼的html：

<div class="wrapper"> 

    <aside> 
     Sidebar   
    </aside> 

    <article> 
      Content 
    </article> 

</div>

當前代碼的CSS：

*{ 
    margin: 0; 
    padding: 0; 
} 

.wrapper{ 
    max-width: 600px; 
    margin: 0 auto; 
} 

aside{ 
    padding: 50px 0; 
    width: 30%; 
    float: left; 
    display: inline-block; 
    background: #aaa; 
} 

article{ 
    padding: 50px 0; 
    width: 70%; 
    float: left; 
    display: inline-block; 
    background: #777; 
}

紅線是一個包含3個ER。請幫忙。

來源

2014-06-15 user3501587

告訴我們什麼ü試過嗎？ – HackerManiac

如果您無法顯示您嘗試過的內容，則由於其廣泛性，此問題可能會被取消。要指向正確的方向，請查看內嵌塊，浮動，百分比寬度和/或flexbox。 –

什麼都沒有，我認爲和你一樣。並尋找一種方式/想法我div.sidebar和div.content，這兩個數字浮動：左，。側欄{寬度：30％;}和。內容{width：70％;} – user3501587

使用CSS3屬性框大小，可以輕鬆實現這種佈局。

HTML

<div class="wrapper"> 

    <aside> 
    <p>Content Goes Here</p>  
    </aside> 

    <article> 
     <p>Content Goes Here</p> 
    </article> 
</div>

CSS

*{ 
margin: 0; 
padding: 0; 
} 

.wrapper{ 
margin: 0 auto; 
} 

aside{ 
padding:50px 0 50px 10%; 
width: 30%; 
float:left; 
background: #aaa; 
box-sizing:border-box; 
-webkit-box-sizing:border-box; 
} 

article{ 
padding:50px 10% 50px 0; 
width: 70%; 
float:left; 
background: #777; 
box-sizing:border-box; 
-webkit-box-sizing:border-box; 
}

Have a Fiddle DEMO

來源

2014-06-16 08:29:36

感謝，對於此代碼 – user3501587

快速骯髒的解決方案：背景div。 http://jsfiddle.net/VwWjp/

div.halfbg{ 
    background-color:#aaa; 
    min-width:180px; 
    width:calc(50% - 120px); 
    position:absolute; 
    top:0; 
    left:0; 
    bottom:0; 
    z-index:-999; 
}

來源

2014-06-15 20:07:40 ndm13

不錯，但是以響應流體設計這不起作用;/ – user3501587

CSS - 從屏幕左側開始側邊欄的佈局（見圖片）

回答

相關問題