在 html 中重新排列 div答案

【问题标题】：Rearrage the div in html在 html 中重新排列 div
【发布时间】：2017-01-27 14:35:17
【问题描述】：

我的 php 页面中有一个 div，如下所示

<div class="col-md-16" id="">
    <div class="textwidget">
        <?php while ($row = mysqli_fetch_array($queryResult)) { ?>
        <div style="margin-bottom: -15px; margin-right: 20px; background-color: #008086;">
            <img class="alignnone wp-image-401" src="uploads/2016/12/homa-1-300x199.png" alt="" width="56" height="37" style="margin-bottom: -19px;" />
            <span class="About-us-Description" style="color: #ffffff;"><?php echo $row['Name'] ?></span><hr>
    </div>
    <div class="textwidget">
        <?php
    $query1 = "Select * from rituals where ritualtypeid=".$row['ritualtypeid'];
    $queryResult1 = mysqli_query($dbcon, $query1);
    ?>
    <?php while ($row1 = mysqli_fetch_array($queryResult1)) { ?>
        <div class="Homas">
            <a style="color: #000000;" href="">
                <i class="fa fa-angle-right"></i> <span class="what-we-offer" style="color: #000000;">
                    <?php echo $row1['Name'] ?>
                </span>
            </a><br />
        </div><?php } ?>
        </div><?php } ?>
    </div>
</div>

它会将结果显示为

**Heading1**
  Content1
  Content2

**Heading2**
  Content3
  Content4

**Heading3**
  Content5
  Content6


 **Heading4**
  Content7
  Content8 so on

但实际上我想展示的是

 **Heading1**    **Heading2**     **Heading3**
   Content1         Content3         Content5
   Content2         Content4         Content6

  ---------------------------------------------------
  **Heading4**
    Content7
    Content8   so on

在 3 个 div 之后，我需要换行，然后 div 应该出现在下一行。怎么做。任何帮助表示赞赏。

【问题讨论】：

所以... twitter bootstrap，12 宽.. 一行 3 列，数量为 4.. 并为下一行定义一个新 div？
你在使用引导程序吗？ “col-md-16”那个类存在吗？
@AngryCoder 当然不是。

标签： php html css twitter-bootstrap

【解决方案1】：

您的代码实际上并不能解释您的输出，但无论如何，如果您使用的是 twitter 引导程序，那么您需要为所有元素指定一个 col-md-4 类并将它们包装在 row-fuild div 中。像这样的：

 <div class="row-fluid">
       <div class="col-md-4" id="" >
            <div class="textwidget"><?php while ($row = mysqli_fetch_array($queryResult)) { ?>
                <div style="margin-bottom: -15px; margin-right: 20px; background-color: #008086;">
                    <img class="alignnone wp-image-401" src="uploads/2016/12/homa-1-300x199.png" alt="" width="56" height="37" style="margin-bottom: -19px;" />
                    <span class="About-us-Description" style="color: #ffffff;"><?php echo $row['Name'] ?></span><hr></div>
                    <div class="textwidget">
        <?php 
        $query1 = "Select * from rituals where ritualtypeid=".$row['ritualtypeid'];
        $queryResult1 = mysqli_query($dbcon, $query1);
    ?>  
             <?php while ($row1 = mysqli_fetch_array($queryResult1)) { ?>
                    <div class="Homas"><a style="color: #000000;" href="">
                            <i class="fa fa-angle-right"></i> <span class="what-we-offer" style="color: #000000;"> 
                                <?php echo $row1['Name'] ?> </span></a><br />
                    </div><?php } ?>
                    </div><?php } ?>
               </div>
            </div>
    </div>

【讨论】：

【解决方案2】：

你正在使用class="col-md-16" 我不认为这个类在引导程序中可用，因为引导程序有 12 个网格系统。试试下面的代码，这正是你要找的：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <div class="row">
    <div class="col-sm-4">
   <p> **Heading1**</p>
  <p>Content1</p>
  <p>Content2</p>
    </div>
    <div class="col-sm-4">
   <p> **Heading2**</p>
  <p>Content3</p>
  <p>Content4</p>
    </div>
    <div class="col-sm-4">
   <p> **Heading3**</p>
  <p>Content5</p>
  <p>Content6</p>
    </div>
  </div>
  
  <p style="border-bottom:1px dashed #000;"> &nbsp;</p>
  
    <div class="row">
    <div class="col-sm-4">
   <p> **Heading4**</p>
  <p>Content7</p>
  <p>Content8</p>
    </div>
    <div class="col-sm-4">
   <p> **Heading5**</p>
  <p>Content9</p>
  <p>Content10</p>
    </div>
    <div class="col-sm-4">
   <p> **Heading6**</p>
  <p>Content11</p>
  <p>Content12</p>
    </div>
  </div>
  
</div>

</body>
</html>

【讨论】：