Question

我目前正在使用容器div中的两个div;右边和左边。我的右侧div工作正常，只包含一个表和搜索框，直到我向左侧div添加一个表。一旦我这样做，它就会合并到左边的div中;歪曲它所包含的表，上帝知道在哪里。

有谁知道为什么会这样做？

下面是我的HTML，CSS以及之前和之后的页面图像。

HTML：

<!doctype html>
<html>
<head>
<link href="Assets/CSS/Master.css" rel="stylesheet" type="text/css" />
<link href="Assets/CSS/Menu.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>Update Account</title>
</head>
<body>
<div class="Container">
<div class="Header"></div>
<div class="Menu">
  <div id="Menu">
    <nav>
      <ul class="cssmenu">
        <li><a href="Home.php">Home</a></li>
        <li><a href="Account.php">Account</a></li>
        <li><a href="Projects.php">Projects</a></li>
        <li><a href="Users.php">Users</a></li>
        <li><a href="LogOut.php">LogOut</a></li>
      </ul>
    </nav>
  </div>
</div>
<div class="LeftBody">
          <form id="form1" name="form1" method="post" enctype="multipart/form-data">
                    <div class="FormElement">
                            <input name="ProjName" type="text" class="TField" id="ProjName" placeholder="Project Name" value="<?php echo $_SESSION["ProName"]; ?>">
                    </div>
                     <div class="FormElement">
                            <input name="StarDate" type="date" class="TField" id="StarDate" placeholder="Start Date" value="<?php echo $_SESSION["StDate"]; ?>">
                    </div>
                    <div class="FormElement">
                            <input name="EnDate" type="date" class="TField" id="EnDate" placeholder="End Date" value="<?php echo $_SESSION["EnDate"]; ?>">
                    </div>
                    <div class="FormElement">
                            <input name="ProDesc" type="text" class="TField" id="ProDesc" placeholder="Description of project" value="<?php echo $_SESSION["ProBio"]; ?>">
                    </div>
                    <div class="FormElement">
                            <input name="Update" type="submit" class="button" id="Update" value="Submit Changes">
                    </div>
          </form>
          <!--WHY DOES IT COLLAPSE INTO LEFT DIV!-->
           <div class="FormElement">
                    <table width="" cellpadding="5" cellspacing="5">
                    <p><strong>Current Users on Project:</strong></p>
                    <tr>
                      <td><strong>First Name</strong></td>
                      <td><strong>Last Name</strong></td>
                      <td><strong>Job Role</strong></td>
                      <td><strong>Skill(s)</strong></td>
                      <td></td>
                    </tr>
                    <?php

                            if(mysqli_num_rows($search_query)!=0){
                                do{ ?>
                    <tr>
                      <td><?php echo $search_rs['Fname']; ?></td>
                      <td><?php echo $search_rs['Lname']; ?></td>
                      <td><?php echo $search_rs['JobRole']; ?></td>
                      <td><?php echo $search_rs['Description']; ?></td>
                      <td><input type="submit" name="removeuser" value="Remove"  /></td>
                    </tr>
                    <?php   } while ($search_rs=mysqli_fetch_assoc($search_query));
                                } else {
                                    echo "No results found";
                                }
                     ?>
            </div> 
</div>
<div class="RightBody">
            <form name="search_form" method="post" action="" >
              <input type="text" name="search_box" value="" placeholder="Search for skills or a user." />
              <input type="submit" name="search" value="Search" />
            </form>
            <table width="" cellpadding="5" cellspacing="5" >
            <p><strong>Search Results:</strong></p>
            <tr>
              <td></td>
              <td><strong>First Name</strong></td>
              <td><strong>Last Name</strong></td>
              <td><strong>Job Role</strong></td>
              <td><strong>Skill(s)</strong></td>
            </tr>
            <?php
                        if(isset($_POST['search'])){
                        if(mysqli_num_rows($search_query)!=0){
                            do{ ?>
<tr>
              <td><input type="submit" name="adduser" value="Add"  /></td>
              <td><?php echo $search_rs['Fname']; ?></td>
              <td><?php echo $search_rs['Lname']; ?></td>
              <td><?php echo $search_rs['JobRole']; ?></td>
              <td><?php echo $search_rs['Description']; ?></td>
            </tr>
            <?php   } while ($search_rs=mysqli_fetch_assoc($search_query));
                            } else {
                                echo "No results found";
                            }}
                        ?>
</div>
</div>
<div class="Footer">
          <footer class="footer-basic-centered">
            <p class="footer-company-motto">We Always Believe</p>
            <p class="footer-links"> <a href="Home.php">Home</a> · <a href="Account.php">Account</a> · <a href="Projects.php">Projects</a> · <a href="Users.php">Users</a> · <a href="LogOut.php">LogOut</a> </p>
            <p class="footer-company-name">Project Mainframe &copy; 2016</p>
          </footer>
</div>
</body>
</html>

CSS：

/* CSS Document */

html,body {
    margin:0 0 20px;
    padding:0px;
    background-color: #D8D7D7;
    height: 100%;
    width: 100%;
}
.Container { width:100%; height: 100%; clear:both; overflow:hidden; background-color:#FFF;  }
.Header { width:600px; height:100px; background-image: url(../Images/Logo1.JPG); background-repeat: no-repeat;  background-position:center; }
.Menu { height:70px; width: 100%; }
.LeftBody { 
    width:48%;
    float:left;
    height:100%;
    border: 1px solid black;
}
.RightBody { 
    width:48%;
    float:right;
    height:100%;
    border: 1px solid red;
}
.FormElement { width:350px; margin:6px auto; height:40px; }
.FormElementBio { width:350px; margin:6px auto; height:auto;  }
.FormTable { width:350px; margin:6px auto; height:40px; text-align:center; vertical-align:middle;}
.FormTableProjects { width:600px; margin:6px auto; height:40px; text-align:center; vertical-align:middle;}
.TField { width:350px; height:35px; border:1px solid #E0DFDF; padding-left:6px; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; font-size:17px; }
.button { width:200px; height:50px; border:0px solid; background-color:rgba(47, 83, 168, 1.00); color:#FFF; font-size:24px; }
.button:hover { background-color: rgba(26,8,114,1.00); color: #FFF; }
.skillselect {}
.expnumber { margin-left: 15px; }
.Footer {
    height: 100px;
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 40px;
}
.footer-basic-centered{
    background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    font: normal 18px sans-serif;

    padding: 45px;
    margin-top: 80px;
}

.footer-basic-centered .footer-company-motto{
    color:  #8d9093;
    font-size: 24px;
    margin: 0;
}

.footer-basic-centered .footer-company-name{
    color:  #8f9296;
    font-size: 14px;
    margin: 0;
}

.footer-basic-centered .footer-links{
    list-style: none;
    font-weight: bold;
    color:  #ffffff;
    padding: 35px 0 23px;
    margin: 0;
}

.footer-basic-centered .footer-links a{
    display:inline-block;
    text-decoration: none;
    color: inherit;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 600px) {

    .footer-basic-centered{
        padding: 35px;
    }

    .footer-basic-centered .footer-company-motto{
        font-size: 18px;
    }

    .footer-basic-centered .footer-company-name{
        font-size: 12px;
    }

    .footer-basic-centered .footer-links{
        font-size: 14px;
        padding: 25px 0 20px;
    }

    .footer-basic-centered .footer-links a{
        line-height: 1.8;
    }
}

当我向左边的div添加一个表时，为什么我的'正确'div会变成左'左'div？

0 个答案: