0

我想在我的页面上放一个标题，但是比如说我有两个 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>

在此处输入图像描述

4

1 回答 1

0

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

float:left;

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

或者你可以使用绝对定位。

给你的身体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

于 2013-05-16T10:10:08.143 回答