html - 在 2 列中排列多个 div，每 7 个 div 交替

Question

我正在尝试按如下方式排列 div:

我的 php 代码输出 7x <div class="left">其次是 7x <div class="right">然后用 7x <div class="left"> 重复等等……

我就是搞不懂CSS。这是我能得到的最接近的值，但绝对不正确。

div.left {
float:left;
border: 1px solid #000;
height: 141px;
width: 373px;
}
div.right {
padding-left: 380px;
border: 1px solid #000;
height: 141px;
width: 373px;
}

http://jsfiddle.net/b0mfw7n9/

这是生成 div 的 PHP 代码:

        <?php 
  if(isset($addresses)) 
    {
    $i=0;
    $state = FALSE; 
    foreach($addresses as $address) 
        { 
if ($i % 7 === 0) {$state = !$state;} ?>
<div class="<?php if ($state) : ?>left<?php else: ?>right<?php endif; ?>"> 
<?php  $i++; ?>
<textarea class="address"><?php echo $address;?></textarea>
</div>
    <?php   } } ?>

Answer 1

这是代码，根据需要调整它并使用 CSS 通过媒体查询更改大小

<div id=wrapper>
<?php
$i = 1;
$max = 28;
$jump = 8;
$chk = 7;
while($i <$max)
    {
    echo "<div class='border left '> <h1>$i</h1></div>";    
    echo "<div class='border right'><h1>$jump</h1></div>";
        if($i % 7 == 0)
        {
        $i = $i + 7;
        $jump = $jump + 7;
        }
    $i++;   
    $jump++;
    }
?>
</div>  

和CSS

div.left {
float:left;
background:#ff3366;
}
div.right {
float:right;
background:#ff6699;
}

textarea.address {
height: 127px;
margin: 0px;
padding: 0px;
resize:none;
overflow: auto; 
font-weight: bold; 
font-family: verdana; 
font-size: 16px;
}

.border{
border:1px solid;
min-height:10px;
height: 141px;
width: 375px;
}
#wrapper{
width:755px 

}