0

我很难为具有主标题 div 的布局获得正确的位置 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

您需要#hdrleft并#hdrleft添加 float 属性来中断流程：

#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 回答