将两个<divs>水平放置在彼此旁边</divs>

时间：2013-04-08 15:19:27

标签： asp.net css html css-float alignment

我正试图将两个彼此相邻。我尝试了这个问题的代码：CSS two divs next to each other但没有任何作用。

这是我的代码

profile.css： 

#content {

    width: 100%;

}

#profile-image {

    float: left;
    display: inline-block;


}

#profile-details {



    float: right;
    display: inline-block;
    margin-left: 200px;


}

UserProfile.aspx： 

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="UserProfile.aspx.vb" Inherits="UserProfile" %>

<asp:Content ID="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1">

    <link rel="stylesheet" href="profile.css" type="text/css"  />

    <div id="content">
        <div id="profile-image">
            <asp:Image ID="Image1" runat="server" Height="191px" Width="128px" />

            <br />
            <br />
            Upload picture:
            <asp:FileUpload ID="profImageUpload" runat="server" />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>

        <div id="profile-details">


            <asp:Table ID="Table1" runat="server">
            </asp:Table>
            asdafasf



        </div>

    </div>

    <div></div>
</asp:Content>

的style.css： 

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0 297px 0 137px;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: 700;
    font-size: medium;
}
ol, ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before, q:after {
    content: '';
}
abbr, acronym {
    border: 0;
}
header, nav, section, article, aside, footer {
    display: block;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
    background-image: url(../images/Images/background-large.png);
    background-repeat: repeat-x repeat-y;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
/* Begin of styles for the demonstration (you can remove them) */
a.expand {
    width: 150px;
    display: block;
    margin: 10px 0 0;
}
a.expand:hover {
    height: 500px;
}
/* End of of styles for the demonstration */
p {
    margin: 0 0 18px;
    width: 386px;
    height: 55px;
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width: 1000px;
    margin: 0 auto;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
    margin-top: 25px;
    height: 39px;
    background-color: #D1D1D1;
    width: 899px;
}


.navigation-menu, .menu ul, .menu li, .menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    margin-top: 2px;
    margin-bottom: 50px;


}

.navigation-menu {
    height: 40px;
    width: 550px;

    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.navigation-menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
    z-index: 1;



}

.navigation-menu li a {
    display: block;
    padding: 0 14px 0 30px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;

    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;

    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;

    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);

    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

.navigation-menu li:first-child a {
border-left: none;
}
.navigation-menu li:last-child a{
border-right: none;
}

.navigation-menu li:hover > a {
color: #8fde62;
}

.navigation-menu ul {
    position: absolute;
    top: 40px;
    left: 0;


    opacity: 0;
    background: #1f2024;

    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;

    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;

}

.navigation-menu li:hover > ul { opacity: 1; }

.navigation-menu ul li {
    height: 36px;
    overflow: hidden;
    padding: 0;

    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}

.navigation-menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;

}

.navigation-menu ul li a {
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;

    border: none;
    border-bottom: 1px solid #353539;
}

.navigation-menu ul li:last-child a {
border: none;
}

.navigation-menu a.documents { background: url(../images/Icons/document.png) no-repeat 6px center; }
.navigation-menu a.messages { background: url(../images/Icons/mail.png) no-repeat 6px center; }
.navigation-menu a.settings { background: url(../images/Icons/settings.png) no-repeat 6px center; }
.navigation-menu a.home { background: url(../images/Icons/home.png) no-repeat 6px center; }
.navigation-menu a.profile { background: url(../images/Icons/profile.png) no-repeat 6px center; }
.navigation-menu a.mainsettings { background: url(../images/Icons/settings.png) no-repeat 6px center; }
.navigation-menu a.docs{ background: url(../images/Icons/document.png) no-repeat 6px center; }
.navigation-menu a.others { background: url(../images/Icons/movie.png) no-repeat 6px center; }
.navigation-menu a.uploads { background: url(../images/Icons/upload.png) no-repeat 6px center; }
.navigation-menu a.profile { background: url(../images/Icons/user.png) no-repeat 6px center; }
.navigation-menu a.projects { background: url(../images/Icons/stamp.png) no-repeat 6px center; }
.navigation-menu a.yprojects { background: url(../images/Icons/stamp.png) no-repeat 6px center; }
.navigation-menu a.otherprojects { background: url(../images/Icons/stamp.png) no-repeat 6px center; }




/* Middle
-----------------------------------------------------------------------------*/
#middle {
    /*border-left: 250px solid #B5E3FF;
    border-right: 250px solid #FFACAA;*/
    height: 1%;
    position: relative;
}
#middle:after {
    content: '';
    clear: both;
    display: table;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
    margin-right: -100%;
}
#content {

    padding: 75px 20px;
    background-color: #D1D1D1;
}




/* Footer
-----------------------------------------------------------------------------*/
#footer {

    margin-top: 50px;
    height: 25px;
    background: #D1D1D1;
}

#login {

    margin-top: 10px;
    width: 899px;
    background-color: #909090;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 1px;

}

#login-form {

    background-color: #909090;
    width: 899px;


}

目前看起来如何： enter image description here

编辑： MasterPage中的代码已更改，我的网页现在显示如下：

enter image description here

MasterPage.aspx： 

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE html>

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



    Protected Sub Page_Load(sender As Object, e As EventArgs)

        If Session("userid") = Nothing Then
            txtLoginUser.Visible = True
            txtLoginPass.Visible = True

        Else


            Dim conn As New SqlConnection("Data Source=BRIAN-PC\SQLEXPRESS;Initial Catalog=master_db;Integrated Security=True")
            Dim useridComm As String = "SELECT name, surname FROM users WHERE user_id=@userid"
            Dim sqlUserID As New SqlCommand

            conn.Open()

            Dim userid As String = Session("userid")

            sqlUserID = New SqlCommand(useridComm, conn)
            sqlUserID.Parameters.AddWithValue("@userid", userid)
            Dim datareader As SqlDataReader = sqlUserID.ExecuteReader()
            If datareader.HasRows Then

                FormsAuthentication.RedirectFromLoginPage(datareader("user_id"), True)
                lblLoggedIn.Text = datareader("name").ToString() & " " & datareader("surname").ToString()

            End If
            datareader.Close()
            conn.Close()

        End If
    End Sub

   Protected Sub Button1_Click(sender As Object, e As EventArgs)

        Dim loginSQL As New SqlCommand
        Dim loginComm As String

        Dim CommonFunctions As New CommonFunctions()
        Dim dec_pass As String = CommonFunctions.EncryptPassword(txtLoginPass.Text.Trim)

        Dim conn As New SqlConnection("Data Source=BRIAN-PC\SQLEXPRESS;Initial Catalog=master_db;Integrated Security=True")


        loginComm = "SELECT user_id FROM users WHERE username=@username and password=@password"

        conn.Open()


        loginSQL = New SqlCommand(loginComm, conn)
        loginSQL.Parameters.AddWithValue("@username", txtLoginUser.Text.ToString)
        loginSQL.Parameters.AddWithValue("@password", dec_pass)
        Dim dr As SqlDataReader = loginSQL.ExecuteReader()
        dr.Read()


        If dr.HasRows Then
            Session("userid") = dr("user_id")
        ElseIf dr.HasRows = False Then

            lblRegister.ForeColor = Drawing.Color.Red
            lblRegister.Text = "Incorrect Username/Password."
        End If
        dr.Close()
        conn.Close()

    End Sub





</script>



<head>
    <meta charset="utf-8" />
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

    <form id="form1" runat="server">

<div id="wrapper">

    <header id="header">
        <strong>Header:</strong> Mobile CMS

        </header>


<section id="login">

    <div id="login-form">

         <p>

                    <asp:Label ID="lblUsername" runat="server" Font-Bold="True" Text="U:"></asp:Label>
&nbsp;<asp:TextBox ID="txtLoginUser" runat="server" BorderStyle="None" BorderWidth="0px" Wrap="False"></asp:TextBox>
&nbsp;
                    <asp:Label ID="lblUsername0" runat="server" Font-Bold="True" Text="P:"></asp:Label>
                    <asp:TextBox ID="txtLoginPass" runat="server" BorderStyle="None" BorderWidth="0px" TextMode="Password" Wrap="False"></asp:TextBox>
&nbsp;
                    <asp:Button ID="btnLogin" runat="server" BorderStyle="None" OnClick="Button1_Click" Text="Login" />

                </p>

                <p>

                    <asp:Label ID="lblRegister" runat="server" Font-Bold="True" Font-Underline="True" ForeColor="#0000CC" Text="Register"></asp:Label>

                    <asp:Label ID="lblLoggedIn" runat="server"></asp:Label>

                </p>
         <p>

                    &nbsp;</p>



    </div>

</section>

<div class="navigation-bar">
       <ul class="navigation-menu">

            <li><a href="#" class="home">Home</a></li>
            <li><a href="#" class="mainsettings">Settings</a></li>
            <li><a href="#" class="profile">Profile</a>

                <ul>
                    <li><a href="#" class="messages">Messages</a></li>
                    <li><a href="#" class="settings">Profile Settings</a></li>
                </ul>

            </li>
            <li><a href="#" class="uploads">Uploads</a></li>
            <li><a href="#" class="documents">Media</a>


                <ul>
                    <li><a href="#" class="docs">Documents</a></li>
                    <li><a href="#" class="others">Others</a></li>

                </ul>

            </li>

            <li><a href="#" class="projects">Projects</a>


                <ul>
                    <li><a href="#" class="yprojects">Your Projects</a></li>
                    <li><a href="#" class="otherprojects">Other Projects</a></li>
                </ul>

            </li>

        </ul>

    </div>


    <section id="middle">

        <div id="container">

            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">                       

            </asp:ContentPlaceHolder>

        </div>

    </section>

    <footer id="footer">
        <strong>Footer:</strong> adsfdsgfds
    </footer>

</div>

    </form>

</body>
</html>

3 个答案:

答案 0 :(得分：0)

如果你想让div元素彼此相邻，可以采用一种常见的方法来确保它们都是float：left，或者两者都是float：right。一旦完成，不要忘记清除浮子。

答案 1 :(得分：0)

你在这里遗漏了一些概念：

#content {
    width: 100%;
    overflow:hidden; /* we can use a clearfix or overflow:hidden, I prefer overflow:hidden for most cases*/
}

#profile-image {
    width:200px; /* Give the div a width */
    float: left;
    /* display: inline-block; no - we want to keep the divs block */
}

#profile-details {
    width:200px; /* Give the div a width */
    float: right;
    /* display: inline-block; no - we want to keep the divs block */
    /* margin-left: 200px; You don't need this if you set the widths up properly */
}

答案 2 :(得分：0)

将“overflow：hidden”添加到父元素，例如

#content {
    overflow: hidden;
}

上面将允许父元素展开以覆盖子元素的高度。

然后你只需浮动子元素。

将子项设置为内联块元素将是正常的，只要它们实际上都适合父项的宽度。

否则我建议给他们每个宽度。

相关问题
最新问题