在 PHP 中，如何在 div 中从左到右打印数据以及在 Flipkart 等单词上打印数据答案

【问题标题】：In PHP how to print data in div from left-to-right and on words like flipkart在 PHP 中，如何在 div 中从左到右打印数据以及在 Flipkart 等单词上打印数据
【发布时间】：2016-04-19 09:00:02
【问题描述】：

我正在创建一个 div 结构来显示来自 db 的数据。就我而言，所有内容都已写入，否则我无法正确打印该数据。

我有一个主 div (col-md-12)，并且在其中添加了 (col-md-4) 我已经从 db 中获取图像，例如 php 中的echo $img;，因此图像会正确显示，但它们不是从左到右，就像它们显示在每个 div 下方而不是从左到右插入一样，所以我的问题是如何插入该 div从左到右而不是从下到下

和我想要的像下面这样的img

这是我的代码

【问题讨论】：

您是将col-sm-12 和col-md-4 保留在循环内部还是外部？
请发布您的代码
请发布您的代码
需要代码，以便我们可以看到您应用的循环
本站与解决您面临的问题的代码有关，不提供完整的解决方案，而不知道您到目前为止已经尝试过什么。请提供代码或更好的是jsfiddle。 -1 形成我。

标签： php html

【解决方案1】：

你的 HTML 结构应该是这样的：

<div class="main">
    <div class="col-sm-12">
        <div class="col-sm-4">
            // image one
        </div>
        <div class="col-sm-4">
            // image two
        </div>
        <div class="col-sm-4">
            // image three
        </div>
    </div>
</div>

如果您在循环中使用HTML，则可以按照以下步骤操作：

<div class="main">
    <div class="col-sm-12">
    <?
    $i = 1;
    foreach ( yourloop ) {        
    ?>
        <div class="col-sm-4">
            // image one
        </div>
       <?
       // after every third record use clear div
       if($i == 3){
       ?>
          <div style="clear:both"></div>
       <?    
       $i = 1; // reassign the value
       }
    $i++;
    }
    ?>
    </div>
</div>

更新 1：

使用您提供的代码的解决方案：

<div class="main">
    <div class="col-sm-12">
    <?
    while ( yourloop ... ) {        
    ?>
        <div class="col-sm-4">
            // your stuff
        </div>
    <?       
    }
    ?>
    </div>
</div>

我改变了什么？

你需要在你的循环中使用<div class="col-sm-4">，你也可以按照第二个例子使用clear:both; div。

更新 2（针对未来方面）：

对于新的设计师和开发者你必须了解Basic grid layouts：

FROM Bootstrap Examples:

您还可以点击此链接获取有关引导类之间差异的信息：

来自其他answer：

.col-xs = *超小型设备（即电话）(
.col-sm = 小型设备（即平板电脑）(≥768px)
.col-md = 中型设备（即笔记本电脑或小型台式机）(≥992px)
.col-lg = 大型设备（即台式机）(≥1200px)*

【讨论】：

@DeooHirulkar：解决你的问题只是一个基本的想法，正如我的其他朋友告诉你的那样，请在你的问题中分享你的代码，而不是我们可以轻松地产生解决方案....跨度>
你好，我已经在 que 的上面部分添加了我的代码图像作为 img on（这是代码详细信息）单词

【解决方案2】：

由于这是引导程序，您可以通过保持三个图像连续来做到这一点。

伪代码

counter = 0
for i in images:
    if counter = 0:
        print "<div class = 'row'>"
    print "<div class='col-md-3'>"+i+"</div>"
    counter++;
    counter = counter % 3;
    if counter == 0:
        print "</div>"

【讨论】：

【解决方案3】：

您可以使用 (CSS) 样式定义 float:left; 简单地创建块，如下例所示：

<?php
    echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
     <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"de-de\" lang=\"de-de\" >
     <head>
     <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />
     <style type="text/css">
     ";
    echo '.panel { float:left; margin:4px; border:1px solid #999; }'.PHP_EOL;
    echo '.clear { clear:both; }'.PHP_EOL;
    echo 'H3 { font-size:0.8em; background-color: #666; color:white; margin:0 0 4px 0; font-weight:bold; text-align:center; }'.PHP_EOL;
    echo "</style>
     </head>
     <body>
     ";

    echo '<h2>Block 1</h2>';
    for ($xi=1; $xi<=5; $xi++) {
        echo '<div class="panel"><h3>Panel 1.'.$xi.'</h3><br />contents go here<br />contents go here<br />contents go here</div>';
    }
    echo '<div class="clear"></div>';

    echo '<h2>Block 2</h2>';
    for ($xi=1; $xi<=5; $xi++) {
        echo '<div class="panel"><h3>Panel 2.'.$xi.'</h3><br />contents go here<br />contents go here<br />contents go here</div>';
    }
    echo '<div class="clear"></div>';

    echo "</body>
     </html>
     ";         
?>

【讨论】：