HTML CSS PHP转换div

Question

当我调整页面大小时，我的div会不断移动有人可以帮我这个吗？ html / php（用于登录和页面获取的php）

我的html正文部分，其中包含一些用于登录的php和一些带有页面的内容

<div class="menu">
    <img src="logo.png" style=" position: relative; margin-right: 38%">

    <ul class="dropdown">

        <li><a href="?page=Home" <?php if ($page == 'Home') { ?> id="a-active" <?php } ?>  >Home</a>
            <ul class="sub_menu">
                <li><a href="#">News</a></li>
                <li><a href="#">Servers</a></li>
            </ul>
        </li>
        <li><a  href="?page=Forum" <?php if ($page == 'Forum') { ?> id="a-active" <?php } ?> >Forum</a>
            <ul class="sub_menu">
                <li><a href="#">Common</a></li>
                <li><a href="#">Information</a></li>
                <li><a href="#">Griefs &amp; Player reports</a></li>
                <li>
                    <a href="#">Unbans</a>
                </li>
            </ul>
        </li>
        <li><a href="?page=Information" <?php if ($page == 'Information') { ?> id="a-active" <?php } ?> >Information</a>
            <ul class="sub_menu">
                <li>
                    <a href="#">Rules</a>
                </li>
                <li>
                    <a href="#">Staff</a>
                </li>
                <li>
                    <a href="#">Servers</a>
                    <ul>
                        <li><a href="#">Survival</a></li>
                        <li><a href="#">Games</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="?page=Topscores" <?php if ($page == 'Topscores') { ?> id="a-active" <?php } ?> > Topscores</a>
            <ul class="sub_menu">
                <li><a href="#">Playtime</a></li>
                <li><a href="#">Kills</a></li>
                <li><a href="#">Game wins</a></li>
            </ul>
        </li>
        <li><a href="?page=Donations" <?php if ($page == 'Donations') { ?> id="a-active" <?php } ?> >Donation</a>
        </li>
    </ul>


    <div class="content">
        <?php
        if ($page == 'Forum') {
            include 'forum/index.html';
        } elseif ($page == 'Information') {
            include 'information/index.html';
        } elseif ($page == 'Topscores') {
            include 'topscores/index.html';
        } elseif ($page == 'Donations') {
            include 'donations/index.html';
        } elseif ($page == 'Home') {
            include 'home/index.html';
        } else {
            include '404/index.html';
        }
        ?>
    </div>

    <div class="contentmirror1">
        <?php
        if (isset($_SESSION['username'])) {
            ?>
            <form  width="110px" id="form1" name="form1" method="post" action="logout.php">
                <table width="100px" border="0" align="center">
                    <tr>
                        <td colspan="2">Welcome</td>
                    </tr>
                    <tr>
                        <td><input readonly type="text" name="name" style="border:none; background-color: transparent;" value="<?php echo htmlspecialchars($_SESSION['username']); ?>"></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><input type="submit" name="button" id="button" value="Logout" /></td>
                    </tr>
                </table>
            </form>

            <?php
        } else {
            ?>
            <form  width="110px" id="form1" name="form1" method="post" action="login.php">
                <table width="100px" border="0" align="center">
                    <tr>
                        <td colspan="2">Login</td>
                    </tr>
                    <tr>
                        <td>Username:</td>
                        <td><input type="text" name="username" id="username" /></td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td><input type="password" name="password" id="password" /></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><input type="submit" name="button" id="button" value="Login" /></td>
                    </tr>
                </table>
            </form>
    <?php
}
?>

    </div>
    <div class="contentmirror" style="Clear: Both;">
        spambox/online shizzle
    </div>

</div>

我的css

.head{
    height: 115px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgb(200,200,200);
    z-index: -999;
}
html {
    background: url('background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.menu{
    display: inline-block;
    position: absolute;
    padding: 2%;
    text-align: center;
    width: 86%;
    left: 0px;
    top: 0px;
    font-family: arial;
    z-index: 0;
}
.menu::after {
    padding-top: 56.25%; /* percentage of containing block _width_ */
    display: block;
    content: '';
}
.content{
    float: left;
    margin-top: 5%;
    width: 60%;
    max-width: 60%;
    padding: 1%;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.contentmirror{
    float: right;
    margin-top: -3%;
    margin-right: 5%;
    max-width: 26%;
    width: 26%;
    padding: 1%;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.contentmirror1{
    float: right;
    margin-top: -25%;
    margin-right: 8%;
    max-width: 26%;
    width: 26%;
    padding: 1%;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.sidepanelright{
    float: right;
}

.main{
    text-align: center;
    font-family: arial;
    font-size: 24px;
}

.pics {  
    width: 70%; 
    max-height: 100%;   
    margin: 0px auto;
} 

.pic {
    display: none;  
    background-color: transparent;
    border: none;
    width: 100%; 
    max-height: 100%; 
}

.menu a{
    color: black;
    background-color: white;
    padding: 5px 10px;
    margin: 0px 5px;
    border-radius: 10px;
    text-decoration: none;
    -moz-box-shadow:    0px 0px 20px 0px #4E4E4E;
    -webkit-box-shadow: 0px 0px 20px 0px #4E4E4E;
    box-shadow:         0px 0px 20px 0px #4E4E4E;
    z-index: 0;

}

.menu a:hover{
    padding: 7px 12px;
    -moz-box-shadow:    0px 0px 30px 0px white;
    -webkit-box-shadow: 0px 0px 30px 0px white;
    box-shadow:         0px 0px 30px 0px white;
}

#logo{
    float: left;
    top: -90px;
    position: relative;
    margin: 5px 0px 0px 5px;
    width: 15%; 
    max-height: 100%; 
    z-index: 1;
}

.btn:hover, .btn:focus {
    color: #333333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    color: #333333;
    background-color: #e6e6e6;
}

.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #cccccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

#btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #cccccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

#btn:hover, #btn:focus, #btn:active, #btn.active, #btn.disabled, #btn[disabled] {
    color: #333333;
    background-color: #e6e6e6;
}

#btn:hover, #btn:focus {
    color: #333333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

#a-active{
    color: black;
    background-color: #DDDDDD;
    padding: 5px 10px;
    margin: 0px 5px;
    border-radius: 10px;
    text-decoration: none;
    -moz-box-shadow:    0px 0px 20px 0px #4E4E4E;
    -webkit-box-shadow: 0px 0px 20px 0px #4E4E4E;
    box-shadow:         0px 0px 20px 0px #4E4E4E;
    z-index: 0;
}

#a-active:hover{
    background-color: white;
    padding: 7px 12px;
    -moz-box-shadow:    0px 0px 30px 0px white;
    -webkit-box-shadow: 0px 0px 30px 0px white;
    box-shadow:         0px 0px 30px 0px white;
}
*                                   { margin: 0; padding: 0; }
body                                { font: 14px Helvetica, Sans-Serif; } 
#page-wrap                          { width: 800px; margin: 25px auto; } 
a                                   { text-decoration: none; }
ul                                  { list-style: none;}
p                                   { margin: 15px 0; }
/* 
    LEVEL ONE
*/
.drops{
    margin-left: 30%;
}
ul.dropdown                         { position: relative; margin-left: 37%; margin-top: 2%;}
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1;  }
ul.dropdown a:hover                 { }
ul.dropdown a:active                { }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
}
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                {  color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }


/* 
    LEVEL TWO
*/
ul.dropdown ul                      { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li                   { font-weight: normal; float: none; }

/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                 { border-right: none; width: 100%; display: inline-block; } 

/* 
    LEVEL THREE
*/
ul.dropdown ul ul                   { left: 100%; top: 0; }
ul.dropdown li:hover > ul           { visibility: visible; }

当我调整窗口大小时，div会向左或向下移动。有没有办法将这些div设置在一个不转移位置的位置只停留在那里？

Answer 1

我几乎不了解您的代码，但让 this fiddle让您了解如何修复div。

我建议你避免使用float div，并执行以下操作：

.fix{ 
 /* this is parent div */
    display:inline-block ;
    white-space:nowrap;
}
.fxchld{
   /* these are child divs */
    width:50px;
    display:inline-block ;
    height:50px;
    border:1px solid #000;
}

想法使用display:inline-block ;代替floats，以便它们保持固定在其位置
否则
您必须提供较大的父div width以便child divs won't wrap

小提琴将帮助您理解我的观点!!