我很难为具有主标题 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;
}
最佳答案
您需要 #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;
}
关于html - Div布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12145537/