求教一个css的问题
HTML code
<div class="page">
<div id="header">
<div id="title">
<h1>Welcome to my blog</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<% Html.RenderPartial("UserMenuControl"); %>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
上面是代码
下边是css
CSS code
.page
{
width: 90%;
margin-left: auto;
margin-right: auto;
}
#header
{
position: relative;
margin-bottom: 0px;
color: #000;
padding: 0;
}
div#title
{
display:block;
float:left;
text-align:left;
}
#logindisplay
{
font-size:1.1em;
display:block;
text-align:right;
margin:10px;
color:White;
}
#menucontainer
{
margin-top:40px;
}
我就是想问下<div id="title"> 在 <div id="logindisplay"> 的上面,为什么页面出现的效果是 <div id="logindisplay"> 在上面
#logindisplay
{
font-size:1.1em;
display:block;
text-align:right;
margin:10px;
color:White;
}
如果 margin:10px; 是相对定位的话,那么id为logindisplay的应该在title的下边间隔为10才对啊, ,,,
------解决方案--------------------
#logindisplay
{
font-size:1.1em;
display:block;
text-align:right;
margin:10px;
color:White;
clear:both;
}
楼主 试试
------解决方案--------------------title 使用了float 脱离了文本流
logindisplay就跑上去了。
------解决方案--------------------float:left的原因,给#logindisplay样式加一个clear:both;清楚浮动的样式
------解决方案--------------------楼上的都是正解.
------解决方案--------------------
------解决方案--------------------title 使用了float 脱离了文本流 ,不在尊顺原来的文本流布局了,只是以父级为基础定位, 而其他的子级依然按照原来的文本流布局...这样
logindisplay 就占据了原来的title所在的位置,...logindisplay就跑上去了
------解决方案--------------------建议了解一下浮动,文档流。。
------解决方案--------------------一:你的title层加了样式float:left;导致第二个层紧排在他的右边。
二:那是因为<h1>是自带margin值的,导致左边层离顶部空间加大,只是离顶部距离大于右边离顶部的距离而已
so easy