Question

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

我的输出： enter image description here

有我的asp页面＆lt;％@ Page Language =“VB”AutoEventWireup =“false”CodeFile =“test.aspx.vb”Inherits =“test”％＆gt;

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

Answer 1

请将此添加到您的css

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

example

右列从第一列底部开始

1 个答案: