Question

我试图将我的mysql结果显示为水平切片，一旦到达屏幕末尾就会“自动换行”。现在它在垂直列中显示所有结果。

如何将结果显示为平铺/网格？

<?php while ($r = $q->fetch()): ?>
                <div class="tab-content clear">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div class="col-sm-4 col-xs-4 section1a">
                            <div class="sectionstyle">
                                <div class="textcenter">
                                    <h2> <?php echo $r['Name'] ?></h2>
                                    <p>description goes here</p>
                                </div>
                                <div class="">
                                    <img class="img-responsive" src="images/image.jpg">
                                </div>
                                <div class="clear"></div>
                                <p><small>bar A</small>
                                </p>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                                <p><small>bar B</small>
                                </p>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                        <span class="sr-only">20% Complete</span>
                                    </div>
                                </div>
                                <p><small>bar C</small>
                                </p>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        <span class="sr-only">60% Complete (warning)</span>
                                    </div>
                                </div>
                                <p><a class="btn btn-success btn-primary btn-block buttoncenter" href="#" role="button">Submit</a>
                                </p>
                            </div>

                        </div>
                    </div></div>
                <?php endwhile; ?>

Answer 1

如果您可以使用flexbox（较新的浏览器），那很容易。

在父容器上添加style="display:flex; flex-direction:row;" http://jsfiddle.net/156onrub/

Answer 2

想出来。我把while循环放在错误的位置。这是我修复它的方式。完全是CSS问题，与PHP无关。

            <div class="tab-content clear">
                <div role="tabpanel" class="tab-pane active" id="home">
                  <?php while ($r = $q->fetch()): ?>
                    <div class="col-sm-4 col-xs-4 section1a">
                        <div class="sectionstyle">
                            <div class="textcenter">
                                <h2> <?php echo $r['Name'] ?></h2>
                                <p>description goes here</p>
                            </div>
                            <div class="">
                                <img class="img-responsive" src="images/image.jpg">
                            </div>
                            <div class="clear"></div>
                            <p><small>bar A</small>
                            </p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                    <span class="sr-only">40% Complete (success)</span>
                                </div>
                            </div>
                            <p><small>bar B</small>
                            </p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                    <span class="sr-only">20% Complete</span>
                                </div>
                            </div>
                            <p><small>bar C</small>
                            </p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                    <span class="sr-only">60% Complete (warning)</span>
                                </div>
                            </div>
                            <p><a class="btn btn-success btn-primary btn-block buttoncenter" href="#" role="button">Submit</a>
                            </p>
                        </div>

                    </div>
                  <?php endwhile; ?>
                </div>
              </div>

将mySQL结果显示为水平切片

2 个答案: