Question

我试图在我的页面上放置标题，但是例如我说有两个div，其中div首先声明将出现在顶部，第二个div将出现在它下面。无论我为它设置什么位置。有人可以帮我吗？

css;

    body 
{
    background-color:#CCC;
}

#pageHeader{
    position:relative;
    width:900px;
    height:94px;
    background-color:White;
    margin:0 auto;

}

    #nhsLogo
{
        position:relative;
        margin-left:40px;
}


    #openingHours
{
        position:relative;
        margin-left:500px;
        top:0px;

}

HTML：

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Template.master.cs" Inherits="Template.Template" %>

<!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 runat="server">
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="css/normalize.css" />     
    <link type="text/css" rel="stylesheet" href="css/default.css" />  
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <div id="pageHeader">  

      <div id="openingHours">
    <p style="color:Green; font-size:18px; font-style:oblique;">0876 890756</p>
    <p style="color:Purple; font-size:18px; font-style:oblique;">Opening hours</p> <p></p>
    </div>

    <div id="nhsLogo">
    <p><img src="img/high.png" alt="GPlus logo" /></p>   
    </div>



    </div>


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



    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>

    <script type="text/javascript"  src='<%# ResolveUrl ("~/Js/jquery-1.2.3.min.js") %>'></script>

    <script type="text/javascript" src="js/bootstrap.min.js"></script> 

</body>
</html>

enter image description here

Answer 1

并排两个div的最简单方法是给它们“浮动”CSS规则：

float:left;

https://developer.mozilla.org/en-US/docs/Web/CSS/float

alernatively你可以使用绝对定位。

为您的身体提供css规则：position:relative;

然后你想要定位身体的任何子元素，给出css规则：

position:absolute;
top: 10px; //change this value to adjust vertical positioning
left: 10px; //change this value to adjust horizontal positioning

https://developer.mozilla.org/en-US/docs/Web/CSS/position

定位css html的问题

1 个答案: