如何使用側邊欄創建簡單的佈局

我正在尋找在我的頁面上創建右側邊欄，但是在瀏覽多個嚮導之後，我仍然卡住了。用最少的代碼創建邊欄的最佳方式和大多數瀏覽器/移動設備的方式是什麼？如何使用側邊欄創建簡單的佈局

HTML

<div class="wrapper"> 

<section id="content" class="content"> 

    {squarespace.main-content} 

    <div id="sidebar" class="sidebar"> 

     <squarespace:block-field id="sidebarBlocks" columns="12" /> 

    </div> 
</section>

和CSS

.wrapper {} 
.content {} 
#sidebar {}

來源

2014-03-04 user3370902

你能否更具體地說明你螞蟻的佈局。它應該是反應？包裝紙的寬度應該是多少？它應該居中？... –

+側邊欄不是一個有效的HTML（或HTML5）標記，你可能想稱之爲'擱置' –

我期待有包裝960像素寬，我希望它是響應。在移動設備上，側邊欄可以放在內容下方。 – user3370902

設計你的側邊欄作爲Web用戶控件，並把它下面的div結構內到母版。

<div id="parentContainer"> 
     <div id="sitebody" > 
      <asp:ContentPlaceHolder runat="server" ID="MainContent" />  
     </div> 
     <div id="sidebar"> 
      <uc1:ucSideBar ID="ucSideBar1" runat="server" /> 
     </div> 
</div>

用css觸摸div;

#sidebar 
{ 
    float: left; 
    height: 80%; 
    width: 250px; 
} 
#sitebody 
{ 
    float: left; 
    padding: 0 10px; 
    width: 60%; 
    height :80%; 
} 

#parentContainer 
{ 
    clear: both; 
    float: left; 
    width: 1500px; 
}

to see this in fiddle

來源

2014-03-04 23:56:05 voddy

請介意解釋這段代碼嗎？ – user3370902

看到編輯的代碼，並在答案下方的小提琴鏈接中嘗試。這只是一個曾經包含在site.master中的模板，您可以在添加頁面時填寫任何內容。 – voddy

一種更好的方法是使用一個CSS表佈局具有固定的或動態的寬度邊欄等this fiddle。這不需要任何hacky float clearfixes，並且是cross-browser compatible。

.page { 
    display: table; 
    width: 100%; 
    max-width: 100%; 
    border-collapse: collapse; 
} 

.content, .nav { 
    display: table-cell; 
} 

.content { 
    width: 100%; 
} 

.nav { 
    min-width: 200px; /* Specify a fixed or percentage width or min-width here if required */ 
} 

/* Stack at smaller widths */ 
@media screen and (max-width: 640px) {  
    .nav { 
     /* You could stack sidebar ontop of content using table-header-group instead */ 
     display: table-footer-group; 
    } 
}

來源

2014-03-05 04:58:59

如何使用側邊欄創建簡單的佈局

回答

相關問題