定位CSS HTML的問題

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>

在此處輸入圖片說明

Answer 1

並排設置兩個div的最簡單方法是為其賦予“浮動” CSS規則：

float:left;

https://developer.mozilla.org/zh-CN/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/zh-CN/docs/Web/CSS/position

定位CSS HTML的問題

問題描述

1 個解決方案

解決方案1
0 已采納 2013-05-16 10:10:08

定位CSS HTML的問題

問題描述

1 個解決方案

解決方案1 0 已采納 2013-05-16 10:10:08

解決方案1
0 已采納 2013-05-16 10:10:08