如何在一个<div> </div>中显示由两个分组的数组元素

时间:2014-08-15 09:13:18

标签: php html css html5

我有一系列元素。我需要在页面上显示所有元素,按两个一个分组排列&#39; div&#39; 像这样:

<div class='row'>
    <article id='1'>item 1 row 1</article>
    <article id='2'>item 2 row 1</article>
</div>
<div class='row'>
    <article id='3'>item 1 row 2</article>
    <article id='4'>item 2 row 2</article>
</div>

这是我目前的php和html代码:

<?php if ($arg['teasers']) foreach ($arg['teasers'] as $id => $article)
        { ?>

            <div class="shops_<?php echo ($article['show'])?'fair':'draft'; ?> more">     
            <div class="shops_title">
                <a href="<?php echo $arg['linkbase'].'/?id='.$id; ?>"><?php echo $article['title']; ?></a>

            </div>
            <div class="shops_teaser" onclick="window.location='<?php echo $arg['linkbase'].'/?id='.$id ?>'">
                <?php echo $article['teaser']; ?>
            </div>
            <?php show_button_detail(array('uri'=>$arg['linkbase'].'/?id='.$id)); ?>            
            </div>

        <?php 
        } ?>

完美的例子:http://tympanus.net/codrops/category/tutorials/

1 个答案:

答案 0 :(得分:0)

也许你可以尝试这样的事情:

/* div.more */
div.row {
    display: table-row;
    width: 100%; /* your parent element should specify a width for this to work */
}

/* div.more > div[class^="shops_"] */
div.row > article {
    display: table-cell;
    width: 50%;
}