Question

我有一个登录页面，我想在左侧添加侧边栏div。目前，当我在左侧写东西时，它正在流过页面？我该如何解决这个

这是我的代码

<div align="left">
    sdfsdfsdfsdfsfsdfsdf

    </div>

    <div align ="center" style="border: thick none #008080; height: 479px; width: 595px; color: #000000; font-size: medium; font-weight: bold;"><br /><br />


        Not a User? 
      <asp:LinkButton ID="LinkButton1" runat="server" Font-Bold="True" 
          ForeColor="Blue" CausesValidation="false" onclick="LinkButton1_Click">Sign Up</asp:LinkButton><br /><br />
       <center><div class="mainbars"> <div class="vpb_main_wrapper1" top=20 align="center"><br clear="all"></br>
       <div><h1 align="center" 

               style="color: #000000; font-weight: bold; font-size: xx-large; font-family: Calibri;">
           LOG IN</h1></div><hr /><br />

        <div align="left"   style="width:115px; padding-top:10px;float:left; color: #000000; font-size: medium; font-weight: bold; font-family: Calibri;">
            UserName</div>             
    <div align="left" style="width:300px;float:left;">
    <input id="txt_username" class="vpb_textAreaBoxInputs" type="text" value="" name="username" runat="server" onclick="return username_onclick()" placeholder="Username"/>
        <asp:Label ID="LbelUser" runat="server"></asp:Label>
         <asp:RequiredFieldValidator ID="txt_userna" runat="server" 
        ControlToValidate="txt_username" ErrorMessage="* Enter UserName"></asp:RequiredFieldValidator>
            </div><br />.................  etc etc

            </center>

            </div>

Answer 1

像这样的东西。您还需要使用clearfix hack 来清除浮动。

<强> HTML

<div class="container">

    <div class="cf">
        <div class="sidebar">sidebar</div>
        <div class="login">login</div>
    </div>
    hhjhj
</div>

<强> CSS

.sidebar { float:left; width:300px; background:#eee;}
.login { float:right; width:400px; background:#ccc; }

/**

/* http://nicolasgallagher.com/micro-clearfix-hack/

 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {  content: " "; /* 1 */  display: table; /* 2 */    }

.cf:after { clear: both; }

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf { *zoom: 1;  }

<强> JSFiddle Demo

Answer 2

在每个Div中添加这一行CSS

style="float:left;"

如何创建左侧边栏？

2 个答案: