0

メインヘッダー div、画像を保持する左側、および互いの上に 2 つの部分がある右側を含むレイアウトの適切な位置 CSS を取得するのに苦労しています。HTML と CSS が続きます。必須ではないすべての CSS と位置指定の CSS を削除しました。

<!DOCTYPE html >

<html lang="en"">
<head runat="server">
<title></title>
<link href="Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
    <div id="header">

<div id="hdrleft">
<div class="hdrimage">
</div>
</div>
    <div id="hdrright">
    <div class="logindisplay">
    </div>
    <div class="logotransitions">
    </div>
    </div>
</div>
<div>
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

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


#header{
width:800px;
height:250px;
}
#hdrleft{
height:240px;
width:540px;
}
.hdrimage
{
display:inline;
float:left;
height:230px;
width:520px;
background-color:green;
}

#hdrright
{

width:240px;
padding: 0px 8px 0px 8px;
}

.logindisplay 
{
display:inline;
float:right;
height:240px;
height:80px;
width:240px;    
background-color:red;
}

.logotransitions 
{
 display:inline;
float:right;
height:240px;
height:155px;
width:240px;    
background-color:blue;
}
4

1 に答える 1

1

フローを中断するには、float 属性を追加する必要が#hdrleftあります。#hdrleft

#hdrleft {
    height:240px;
    width:740px;
    float: left;
}
#hdrright {
    height:240px;
    width:240px;
    /* padding: 0px 8px 0px 8px; //Add to child elements as margin instead. */
    float: right;
}
于 2012-08-27T16:12:57.373 に答える