日期:2014-05-17  浏览次数:20714 次

求教一个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;清楚浮动的样式
------解决方案--------------------
楼上的都是正解.
------解决方案--------------------
探讨

float:left的原因,给#logindisplay样式加一个clear:both;清楚浮动的样式

------解决方案--------------------
title 使用了float 脱离了文本流 ,不在尊顺原来的文本流布局了,只是以父级为基础定位, 而其他的子级依然按照原来的文本流布局...这样
logindisplay 就占据了原来的title所在的位置,...logindisplay就跑上去了
------解决方案--------------------
建议了解一下浮动,文档流。。
------解决方案--------------------
一:你的title层加了样式float:left;导致第二个层紧排在他的右边。

二:那是因为<h1>是自带margin值的,导致左边层离顶部空间加大,只是离顶部距离大于右边离顶部的距离而已


so easy