Question

这是有问题的网站：http://co-project.lboro.ac.uk/users/cokl/Computifieds/index.php

我正在努力使得当你将窗口调整得更小时，Topright中的div会向左移动。但出于某种原因，它没有。

当我禁用.wrapper3的宽度样式但是页面不再被包裹时，它会起作用。

我知道这可能是简单的答案，但我似乎无法解决这个问题。感谢。

这是与之相关的代码：

    <div id="Toppage">
    <div id="Header" class="wrapper3">

            <a href="index.php"><img style="float:left;" width="200" height="80"src="Images/logo.png"></a>

    <div id="Topright"><div class="nav" style=" margin-left: 17px; margin-top: 3px; font-size:16px;">Buy | Sell | My Account | Community | <a href="messages.php">Messages</a></div></div>



    <font style="float: right; display:block; clear:right; overflow:hidden; margin-top: 28px; font-size:12px;">

    <?php
    if(!isset($user_check))
    {echo 'Welcome, please <a href="login.php">login/register</a> to continue!';

    } else {
    echo 'Welcome '.$_SESSION['login_user'].'. To log out, please click <a href="logout.php">here</a>.';}
    ?>

    </font>
    <?php echo $getpmalert;?>
    </div>

</div>

而css是：

    #Toppage{
background: url("Images/topback.png") repeat-x scroll left bottom #FFFFFF;

}

#Topmiddlepage{
background: url("Images/topmiddle.png") repeat-x scroll left bottom #FFFFFF;
}

#Header{
    height: 80px;

}

#Middleheader{
    height: 40px;
}

#Topright {
  background: url("Images/topright.png") repeat-x scroll left bottom #FFFFFF;
  color: #FFFFFF;
  float: right;
 width: 400px;
 height: 31px;
  overflow: hidden;
}

#Topright2 {
  float: right;
 width: 400px;
 height: 31px;
  overflow: hidden;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -170px; /* the bottom margin is the negative value of the footer's height */
    position: relative;

    font-size: 0.9em;
    margin: 0 auto -170px;
    text-align: left;
}

.wrapper3{
width: 980px;
  margin: 0 auto;
  overflow: hidden;
}

.page {
  overflow: hidden;
  width: 100%;
}

Answer 1

对于.wrapper3，设置min-width和max-width可能会使其变为可变大小。我知道IE有一些问题，但有一些解决方法。

http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml

希望这有帮助。

Answer 2

您需要添加以下CSS：

#Topright {
    position:fixed;
    top:0px;
    right:0px;
}

然后找出你想用“请求登录”消息做什么。

调整窗口大小时右移div标签

2 个答案: