在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 

}