在網頁上以指定的百分比在頁面左側和右側創建空邊欄

Question

我想要創建兩個div標籤，使它們應該是空的。我希望在兩個側邊欄上留出20％的寬度，但現在沒有內容填。

我希望主要內容div爲頁面寬度的60％。

我已經嘗試過使用CSS，但它到目前爲止還不適合我。 這裏是我的CSS代碼：

/* Sidebar */ 

#sidebar-left { 
    float: left; 
    width: 200px; 
    margin: 0px; 
    padding: 0px 0px 0px 0px; 
    color: #000000; 
    border-color:Black; 
} 
#sidebar-right { 
    float: right; 
    width: 20%; 
    margin: 0px; 
    padding: 0px 20px 0px 0px; 
    color: #FFFFFF; 
} 


#content { 
    float: inherit; 
    width: 60%; 
    padding-left:inherit; 
    padding: 0px 0px 0px 0px; 
    position:relative; 
} 

這是我的aspx頁面的代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="article_content.aspx.cs" Inherits="article_content" MasterPageFile="~/Site.master" %> 

<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1" runat="Server"> 
<div id="sidebar-left">abc</div> 

<div id="content"> 
<br /> 
     <asp:Label ID="head_lbl" runat="server" Font-Bold="True" 
     Font-Size="Medium" ForeColor="Black"></asp:Label> 
     &nbsp;<br /> 
    <br /> 
    <asp:Panel ID="Panel1" runat="server" BackColor="White" Width="20%"> 
     &nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="Label1" runat="server" Font-Bold="True" 
      ForeColor="Black" Text="Author" Font-Names="Arial"></asp:Label> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:HyperLink 
      ID="author_link" runat="server" Font-Underline="True" ForeColor="#000066">[author_link]</asp:HyperLink> 
     <br /> 
     &nbsp;&nbsp;&nbsp; 
     <asp:Label ID="Label2" runat="server" Font-Bold="True" ForeColor="Black" 
      Text="Technology"></asp:Label> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <asp:Label ID="tech_lbl" runat="server" Font-Bold="True" ForeColor="#000066"></asp:Label> 
    </asp:Panel> 
    <br /> 
    <br /> 
    <asp:Panel ID="content_panel" runat="server" BackColor="White" Width="60%" 
     BorderColor="#9999FF" BorderStyle="None"> 
     &nbsp;&nbsp; 
     <asp:Label ID="content_lbl" runat="server" ForeColor="Black"></asp:Label> 
    </asp:Panel> 
    <br /> 
    <div id="fb-root"></div> 
<script> (function (d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) { return; } 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
     fjs.parentNode.insertBefore(js, fjs); 
    } (document, 'script', 'facebook-jssdk'));</script> 

<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div> 

<br /> 

<!-- Place this tag where you want the +1 button to render --> 
<g:plusone annotation="inline"></g:plusone> 

<!-- Place this render call where appropriate --> 
<script type="text/javascript"> 
    (function() { 
     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
     po.src = 'https://apis.google.com/js/plusone.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
    })(); 
</script> 

    <br /> 



    </div> 

<div id="sidebar-right"></div> 
    </asp:content> 

我不知道，我這樣做是正確的，但請告訴我什麼樣的變化，我需要做的。

Answer 1

試試這個，

*{margin:0px;} 
#main 
    { 

    }  
#left 
{ 
    float:left; 

    width:20%; 
    } 
#right 
{ 
    float:right; 
    width:20%; 
    } 
#content 
{ 
    float:left; 
    width:59%; 
    border-left:1px solid black; 
    border-right:1px solid black; 
    } 
#footer 
{ 
padding:5px; 
background:black; 
color:white; 
} 

標記

<div id="main"> 
    <div id="left">Left</div> 
    <div id="content">Center</div> 
    <div id="right">Right</div> 
    <div style="clear:both"></div> 
    <div id="footer">Footer</div> 
</div>