0

ページにヘッダーを配置しようとしていますが、たとえば、2 つの div があるとします。最初に宣言された div が一番上に表示され、2 番目の 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

2 つの div を並べて配置する最も簡単な方法は、"float" CSS ルールを指定することです。

float:left;

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

または、絶対配置を使用することもできます。

あなたの体にCSSルールを与えてください：position:relative;

次に、配置したい body の子要素に、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 に答える