Question

我的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应出现在下一行。怎么做。任何帮助表示赞赏。

Answer 1

您的代码确实不会解释您的输出但是无论如何，如果您使用的是Twitter bootstrap，那么您需要为所有元素提供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>

Answer 2

您正在使用class="col-md-16"我认为此课程在引导程序中可用，因为bootstrap具有12个网格系统。请尝试以下代码，这正是您正在寻找的内容：

＆＃13;

<!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>

＆＃13;

在html中支持div

2 个答案: