Question

我有3个div，一个是主div，一个div有两个列表，另一个div有5个列表。我尝试使用引导程序类“行”，但无法正确对齐它们。我该如何将这两个div并排布置？我在下面附上一张图片。谁能帮我解决这个问题。

下面是代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>trial</title>

    <!--Links for icons and images-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <!--css for paginated-->
    <link rel="stylesheet" href="http://localhost/Performance/css/usermange.css">

    <style>
    #displayproject{
       margin-top:100px;
       position:fixed;
       background-color:blue;
    }
    </style>

</head>

<body>
    <div class="container">
        <div id="displayproject">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th></th>
                        <th>Projects</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                        include_once "../Connection/dbconnect.php";
                        $fetch_projects = mysqli_query($GLOBALS['db'],"select project_id,project_name from project_table limit 10;");
                        while($row = mysqli_fetch_array($fetch_projects)){
                            echo '<tr>
                                <td>
                                    <span class="custom-checkbox">
                                        <input type="checkbox" name="options[]" value="hello">
                                        <label></label>
                                    </span>
                                </td>';
                            echo '<td>'.$row['project_name'].'</td></tr><tr></tr>';
                        }
                    ?>
                </tbody>
            </table>
        </div>
        <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                    <div class="col-sm-6">
                        <h2>Manage <b>Employees</b></h2>
                    </div>
                    <div class="col-sm-6">
                        <a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"><i class="material-icons">&#xE147;</i> <span>Add New Employee</span></a>
                        <a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"><i class="material-icons">&#xE15C;</i> <span>Delete</span></a>                        
                    </div>
                </div>
            </div>
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>
                            <span class="custom-checkbox">
                                <input type="checkbox" id="selectAll">
                                <label for="selectAll"></label>
                            </span>
                        </th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Address</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <span class="custom-checkbox">
                                <input type="checkbox" id="checkbox1" name="options[]" value="1">
                                <label for="checkbox1"></label>
                            </span>
                        </td>
                        <td>Thomas Hardy</td>
                        <td>thomashardy@mail.com</td>
                        <td>89 Chiaroscuro Rd, Portland, USA</td>
                        <td>(171) 555-2222</td>
                        <td>
                            <a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
                            <a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="custom-checkbox">
                                <input type="checkbox" id="checkbox3" name="options[]" value="1">
                                <label for="checkbox3"></label>
                            </span>
                        </td>
                        <td>Maria Anders</td>
                        <td>mariaanders@mail.com</td>
                        <td>25, rue Lauriston, Paris, France</td>
                        <td>(503) 555-9931</td>
                        <td>
                            <a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
                            <a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

我得到的输出是

Answer 1

您可以使用bootstrap 3，您可以在此处查看代码 https://codepen.io/shakercs/pen/MBgwQJ

<div class="container">
  <div class="row">
    <div class="col-md-12">
      div is here 
    </div>
  </div>
  
  <div class="row">
    <div class="col-md-3">
      
      <table class="table table-bordered">
        <thead>
          <tr>
             <th>checkbox</th>
          <th>name</th>
          </tr>
         
        </thead>
        <tbody>
          <tr>
            
            <td><input type="checkbox" /></td>
            <td>text</td>
          </tr> <tr>
            
            <td><input type="checkbox" /></td>
            <td>text</td>
          </tr> <tr>
            
            <td><input type="checkbox" /></td>
            <td>text</td>
          </tr> <tr>
            
            <td><input type="checkbox" /></td>
            <td>text</td>
          </tr> <tr>
            
            <td><input type="checkbox" /></td>
            <td>text</td>
          </tr>
          
        </tbody>
      </table>
    </div>
    <div class="col-md-9">
       <table class="table table-bordered">
        <thead>
          <tr>
             <th>checkbox</th>
          <th>name</th>
            <th>title</th>
          <th>title</th>
          </tr>
         
        </thead>
        <tbody>
          <tr>
            
            <td><input type="checkbox" /></td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
          </tr>  <tr>
            
            <td><input type="checkbox" /></td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
          </tr>  <tr>
            
            <td><input type="checkbox" /></td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
          </tr>  <tr>
            
            <td><input type="checkbox" /></td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
          </tr>  <tr>
            
            <td><input type="checkbox" /></td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
          </tr>  <tr>
            
            <td><input type="checkbox" /></td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
          </tr>
          
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 2

您需要使用float:value;的{{1}}属性来实现此目的。

css

value:left|right|clear

Answer 3

这应该对您有用-

<div class="container">
   <div class="row">
     <div class="col-md-12">
        First div
     </div>
   </div>
   <div class="row">
     <div class="col-md-2 col-sm-2" style="border:1px solid">
        <table class="table">
          <tr>
            <td>col</td>
            <td>col</td>
          </tr>
        </table>
     </div>
     <div class="col-md-10 col-sm-12"  style="border:1px solid">
        <table class="table">
          <tr>
            <td>col</td>
            <td>col</td>
            <td>col</td>
            <td>col</td>
            <td>col</td>
          </tr>
        </table>
     </div>
   </div>
</div>

这是示例代码。您可以进行相应的修改。

Fiddle

如何在两个div都有html表格的地方水平地排列两个div？

3 个答案: