Question

我想从MySQL数据库中提取结果，使其显示在网格中，如下所示：

结果1 - 结果2 - 结果3

结果4 - 结果5 - 结果6

等。即每行三个结果。

这是怎么回事：

结果1

结果2

结果3

结果4

结果5

结果6

即。在一栏中。

HTML＆amp; CSS设置为网格，3 X但是记录很多。
但PHP似乎忽略了网格布局，默认为单列。

到目前为止我的代码是这样的：

HTML / PHP

...
    <?php   
    $dbc = mysqli_connect('host', 'account', 'password', 'trialDB') or die('Error connecting to MySQL Server.');

    $query = "SELECT * FROM trialTBL ORDER BY id ASC";
    $result = mysqli_query($dbc, $query) or die('Error querying database.');

    while($row = mysqli_fetch_array($result))
    {?>
        <div class="mainContent">
            <div class="content">   
                <ul class="grid columns-3">
                    <li>
                        <img src="<?php echo $row['image'];?>" />
                        <h3><?php echo $row['title'];?></h3>
                        <p><?php echo $row['description'];?></p>
                    </li>
                </ul>
            </div>
        </div>
    <?php   
    }   
    mysqli_close($dbc);
    ?>...

CSS

.mainContent{
    width: 70%;
    margin: 0 auto;
    margin-top: 3%;}

ul.grid {
    list-style: none;
    font-size: 0px;
    margin-left: -2.5%; /* should match li left margin */}

ul.grid li {
    display: inline-block;
    padding: 10px;
    margin: 0 0 2.5% 2.5%;
    background: #fff;
    border: 1px solid #dfdfdf;
    font-size: 16px;
    font-size: 1rem;
    vertical-align: top;
    box-shadow: 0 0 5px #dfdfdf;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;}

ul.grid li img {
    max-width: 100%;
    height: auto;
    margin: 0 0 10px;}

ul.grid li h3 {
    margin: 0 0 5px;}

ul.grid li p {
    font-size: .9em;
    line-height: 1.5em;
    color: #999;}

ul.grid.columns-3 li {
    width: 30.83%; /* this value + 2.5 should = 33% */}

的MySQL

CREATE DATABASE trialDB;

USE trialDB;

CREATE TABLE trialTBL(
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
image VARCHAR(50) NOT NULL,
title VARCHAR(50) NOT NULL,
description TEXT NOT NULL
);

DESCRIBE trialTBL;

INSERT INTO trialTBL (image, title, description)VALUES(
"images/temperature.png", 
"Temperature Conversion",
"How to convert from one temperature to another"
),
(
"images/temperature.png", 
"Temperature Conversion",
"How to convert from one temperature to another"
),
(
"images/temperature.png", 
"Temperature Conversion",
"How to convert from one temperature to another"
),
(
"images/temperature.png", 
"Temperature Conversion",
"How to convert from one temperature to another"
);

SELECT * FROM trialTBL\G

Answer 1

问题是您正在对包括ul在内的所有内容进行循环，您只需循环li

类似的东西：

<div class="mainContent">
  <div class="content">
    <ul class="grid columns-3">
      while
      <li>
        <img src="<?php echo $row['image'];?>" />
        <h3><?php echo $row['title'];?></h3>
        <p>
          <?php echo $row[ 'description'];?>
        </p>
      </li>
       end while }
     </ul>
  </div>
</div>

Answer 2

添加此

 ul.grid li {
    float: left;
 }

如果它没有完全奏效，还可以添加

width: 33%;

Answer 3

将您的代码更改为：

 while($row = mysqli_fetch_array($result))
{?>
    <div class="mainContent">
        <div class="content">   
            <ul class="grid columns-3">
                <li>
                    <img src="<?php echo $row['image'];?>" />
                    <h3><?php echo $row['title'];?></h3>
                    <h3><?php echo $row['OTHER_COLUMN_NAME'];?></h3>
                    <p><?php echo $row['description'];?></p>
                </li>
            </ul>
        </div>
    </div>
<?php   
}

while循环显示数据列而不是行

3 个答案: