css - 右列从第一列底部开始

嗨，我创建了一个应用程序，它具有两个并排的div显示。我在网上搜索并找到了示例，但是我不知道为什么我的右列开始和左列底部结束。有人告诉我如何纠正它。我希望“ rightcolumn”与“文件位置”行处于同一级别。

我的输出：

有我的asp页面

<!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}

最佳答案

请将此添加到您的CSS

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

example

关于css - 右列从第一列底部开始，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24814356/