右列開始於第一列底部

嗨，我創建了兩個div並排顯示的應用程序。我搜索了網絡並找到示例，但我不知道爲什麼我的右列開始和左列末尾。有人會告訴我如何改正它。我想「rightcolumn」是「文件位置」行的相同級別。右列開始於第一列底部

我的輸出： enter image description here

有我的ASP頁面 <％@頁面語言= 「VB」 AutoEventWireup = 「假」的CodeFile = 「test.aspx.vb」繼承= 「測試」％>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 

<title> Application</title> 
    <link href="StyleSheet.css" type="text/css" rel="stylesheet" />  
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script> 
    <script src="Scripts/jquery.MultiFile.js" type="text/javascript"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="wrap"> 

    <div id="column1-wrap" class="title " > 
     <div id="column1">&nbsp; &nbsp;&nbsp;Applicaton</div> 
    </div> 
    <div id="column2">   
     <asp:Label ID="lblName" Text="Guest" runat="server" /><br/> 
     <asp:Label ID="lblUserGroup" Text="Group" runat="server" /> 
     </div> 

    <div id="clear"></div> 

    <div > 
     <asp:Panel ID="pnlGroup" runat="server" Visible="true" > 
     <span class="sub-title modified"> Select:</span> 
     <asp:RadioButton ID="rd1" runat="server" AutoPostBack="true" Text="Frist" /> &nbsp; &nbsp; 
     <asp:RadioButton ID="rd2" runat="server" AutoPostBack="true" Text="Second" />    
     </asp:Panel> 
    </div> 
    <%--Folder panel --%> 
    <div id="leftcolumn"> 

    <asp:Panel ID="pnlFolder" runat="server" Visible="true" > 
      <br /><asp:Label ID="Label4" Text="File Location:" runat="server" class="sub-title modified"/> 
      <asp:FileUpload ID="fileUploadSingle" runat="server" class="multi" maxlength="1" Visible="true"/>    
      <asp:Button id="btnSubmit" runat="server" text="Sumit" CssClass="button " /> 
    </asp:Panel> 
    </div> 
    <%--end leftcolumn --%> 
     <div id="rightcolumn"> 

     <asp:Button id="Button1" runat="server" text="rightcolumn" CssClass="button " /><br /> 
     <asp:Button id="Button2" runat="server" text="rightcolumn" CssClass="button " /><br /> 
     <asp:Button id="Button3" runat="server" text="rightcolumn" CssClass="button " /><br /> 
     <asp:Button id="Button4" runat="server" text="rightcolumn" CssClass="button " /><br /> 
     <asp:Button id="Button5" runat="server" text="rightcolumn" CssClass="button " /><br /> 

     <asp:Button id="Button6" runat="server" text="rightcolumn" CssClass="button " /><br /> 

     </div> 

</div> 



    </form> 
    </body> 
</html>

有我的樣式表：

body, html { 
    margin:0px; 
    padding:0px; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    color:#000; 
    background-color:#ccc; 
    background-image:url(/images/body-bkg.png); 
    background-repeat:repeat-x; 
} 

#wrap { 
    margin:auto; 
    width:975px; 
    border-top:10px solid #000; 
    background-color:#FFFFFF; 
    height:auto; 
} 

a:link { 
text-decoration:none; 
font-weight:bold; 
color:#000; 
} 



#header { 
    width:975px; 
    height:85px; 
    background-color:#333; 
} 



.title { 
    font-size:16px; 
    font-weight:bold; 
} 
.sub-title { 
    font-size:14px; 
    font-weight:bold; 
} 

.sub-sub-title { 
    font-size:12px; 
    font-weight:bold; 
} 
.right{ 
    float:right; 
    } 


.modified { 
    margin-left:20px; 
    float:left; 
} 

#column1-wrap { 
    float: left; 
    width: 100%; 

} 

#column1 { 
    background-color: cyan;   
} 

#column2 { 
    background-color: lime; 
    float: left; 
    width: 200px; 
    margin-left: -200px; 
    text-align:right; 
} 
#clear, #Div1 { 
    clear: both; 
} 

.left 
{ 
    position:relative; 
    background-color:Green; 
} 
.button { 
    font-size:14px; 
    font-weight:bold; 
    margin-left:20px; 
} 
#leftcolumn { width: 50%; border: 1px solid red; float: left; background-color:Blue;} 
#rightcolumn { width: 50%; border: 1px solid red; float: right}

來源

2014-07-17 user819774

請添加到您的CSS

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
}

example

來源

2014-07-17 22:14:21 user3212461

對不起，我不明白你的答案。我也修改了我的問題。你能告訴我如何再做一次。謝謝。 – user819774

左側和右側列不在同一行，因爲沒有空間。 left col = 50％+ 1px + 1px（左右紅色邊框） right col = 50％+ 1px + 1px（左右紅色邊框）結果50％+ 50％+ 4px = 100％+ 4px 爲了解決這個問題，我們可以1.刪除紅色邊框或者2.通過在代碼之前添加前面提到的css文件，將box-sizing屬性從content-box更改爲border-box。有關箱子大小的更多信息 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing – user3212461

我刪除了兩個紅色邊框。右欄「rightcolumn」位於左側的左欄下方。 – user819774

右列開始於第一列底部

回答

相關問題