Question

我正在使用表来显示来自我的数据库的信息，但是我在格式化CSS时遇到了问题。现在我有12个图标和相应的名称在右边，问题是所有内容都显示为列表，一个在另一个下面，我想在三个块中打破列表，如下所示：

编辑我不需要用表来做，我只需要动态地显示这样的值。因为以后我可能会在数据库中添加更多植物，我希望它们总是像这样列出。

这是我的HTML：

<table id="plantslist"> 

<?php
foreach($resultado as $planta){ ?>

    <tr>
    <td><img src="http://www.coisas.pt/coisas/backoffice/<?php echo $planta['icon']; ?>"></img></td>

    <td><a href="blabla.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>">
        <?php echo $planta['name'];?></a></td>

    </tr>

<?php   } ?>

</table>

CSS：

#plantslist {
    border: 3px solid white;
    overflow: scroll;
    font-size: 1.7vw;
    line-height: 2.8vw;
    font-family: Robotomedium;
    margin-top: 11%;
    text-align: left;

}

#plantslist img {width: 2.3vw;}

#plantslist tr td {

    display: inline-block;
    vertical-align: top;
}

Answer 1

你可以用width: 100%做一个容器;然后制作每个width: 33%个子元素。要将它们放在另一个旁边，您可以使用float: left;。这是一个例子。

＆＃13;

.table {
  width: 100%;
  float: left;
}

.table > .items {
  width: 33%;
  float: left;
}

.table > .items:before {
    content: "";
    display: block;
    background: url(http://placehold.it/20/000) no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

＆＃13;

<div class="table">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
  <div class="items">6</div>
  <div class="items">7</div>
  <div class="items">8</div>
  <div class="items">9</div>
</div>

＆＃13;

看看你的图标是在伪元素之前放置的。您应该使用正确的网址更改background值。

修改

如果每株植物有不同的图像，请使用此选项。

＆＃13;
＆＃13;
.table { width: 100%; float: left; } .table > .items { width: 33%; float: left; } .table > .items img { width: 20px; height: 20px; margin: 0 10px 0 0; float: left; }
＆＃13;
<div class="table"> <div class="items"> <img src="http://placehold.it/20/dfa9a9" alt=""> 1 </div> <div class="items"> <img src="http://placehold.it/20/dfa9de" alt=""> 2 </div> <div class="items"> <img src="http://placehold.it/20/b1a9df" alt=""> 3 </div> <div class="items"> <img src="http://placehold.it/20/a9cadf" alt=""> 4 </div> <div class="items"> <img src="http://placehold.it/20/dfd8a9" alt=""> 5 </div> <div class="items"> <img src="http://placehold.it/20/5cff46" alt=""> 6 </div> <div class="items"> <img src="http://placehold.it/20/dfa9a9" alt=""> 7 </div> <div class="items"> <img src="http://placehold.it/20/a9cadf" alt=""> 8 </div> <div class="items"> <img src="http://placehold.it/20/a9cadf" alt=""> 9 </div> </div>
＆＃13;
＆＃13;
＆＃13;

使用您的PHP代码

HTML | PHP

<div class="table"> <?php foreach($resultado as $planta){ ?> <div class="items"> <img src="http://www.growbox.pt/growbox/backoffice/<?php echo $planta['icon']; ?>" alt="<?php echo $planta['name'];?>"> <a href="intips.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>"><?php echo $planta['name'];?> </a> </div> <?php } ?> </div>

<强> CSS

.table { width: 100%; float: left; } .table > .items { width: 33%; float: left; } .table > .items img { width: 20px; height: 20px; margin: 0 10px 0 0; float: left; }

Answer 2

看看这是否有效。我只是创建更多元素，以便每行有3组tds。但理想情况下，我不会用表来做这件事。我做了一些像div建议的arglab，但是在这里我只是告诉你我是如何用表做的，因为那是你的问题。使你的div内联块宽度为33％，你应该很好。您可能还需要执行box-sizing: border-box，这样任何填充和边距都会自动计入您的计算中。

<table id="plantslist"> 

    <?php $count = 0; ?>

       <tr>

        <?php foreach($resultado as $planta) { 
            if (count === 2) {
                count = 0; ?>

              <td><img src="http://www.growbox.pt/growbox/backoffice/<?php echo              $planta['icon']; ?>"></img></td>

             <td><a href="intips.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>">
            <?php echo $planta['name'];?></a></td>

        </tr>
        <tr>

    <?php   }
    else {
        $count += 1;
        // If this doesn't work, try $count = $count + 1;

        <td><img src="http://www.growbox.pt/growbox/backoffice/<?php echo           $planta['icon']; ?>"></img></td>

        <td><a href="intips.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>">

}

 ?>

    </table>

解决DIVS：看看这是否有效......

<div id="plantslist"> 
<?php foreach($resultado as $planta) { ?>
    <div class="plant">
        <img src="http://www.growbox.pt/growbox/backoffice/<?php echo $planta['icon']; ?>"></img>
        <a href="intips.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>">
        <?php echo $planta['name'];?></a>
    </div>
<?php } ?>
</div>

CSS

#planstslist{
    width: 100%;

    /* this may help if the items don't stack properly */
    white-space: nowrap;
}

.plant{
    width: 33.33%
    display: inline-block;
    /* this may help if the items don't stack properly */
    white-space: normal;
}

您可能需要制作图像内联块并设置它们，并且链接的百分比宽度值加起来不超过100％。您可能还需要将box-sizing: border-box;添加到＆＃34;工厂＆＃34; div的。我通常养成在所有CSS文件上发出以下声明的习惯：* {box-sizing: border-box};

Answer 3

如果您只是从此CSS规则中删除display: inline-block;，我认为这已经足够了;

#plantslist tr td {
    display: inline-block;
    vertical-align: top;
}

display应该是table-cell，而不是inline-block，这是<td>元素中的默认值。另外vertical-align: top;也不是必需的，所以你也可以删除整个规则......

以3个块显示数据库内容

3 个答案:

使用您的PHP代码