1

我尝试实现一种设计，其中两列从上到下填充了几个不同高度的 div，从左到右有一个“溢出”，这样两列的高度几乎相同。

例子：

AAA  CCC
AAA  CCC
AAA  
AAA  DDD
     DDD
BBB  
BBB  EEE
BBB

但我不知道让它发生。我尝试了类似的东西

<div class="items">
   <div class="item even">A</div>
   <div class="item odd">B</div>
   <div class="item even">C</div>
   <div class="item odd">D</div>
   <div class="item even">E</div>
</div>

和

.item.even { float: left; }
.item.odd { float: right; }

或者

.item { display: inline; }

或者

.item { display: inline-block; }

但由于 items-div 的高度和数量未知，我还没有找到可以接受的结果。有任何想法吗？每一个提示都值得赞赏。

这是一个示例 jsfiddle：http: //jsfiddle.net/6W96c/

4

2 回答 2

1

尝试类似....

.items .even { float: left; clear:both;}

.items .odd { float:right; }

没有一些 HTML 就很难测试您的需求。也许你可以创建一个 jsFiddle。

于 2013-03-12T02:09:46.917 回答
0

我终于通过插入带有正则表达式的关闭和打开 div 来解决它。这是php代码：

// $html is containing the html code
preg_match_all('#<div class="item .+?</div>#ism', $html, $matches);
$matches = $matches[0];
// Get all the lengths
$totalLength = 0;
$lengths = array();
foreach( $matches as $key=>$match )
{
   $totalLength += strlen($match);
   $lengths[$key] = $totalLength;
}
// Find the div, which is the closest to the middle
$key = 0;
$distanceFromMiddle = $middle = $totalLength / 2;
while( $distanceFromMiddle > abs($lengths[$key] - $middle) )
{
   $distanceFromMiddle = abs($lengths[$key++] - $middle);
}
// Add div in front off the next div
$replace = '</div><div class="items">'.$matches[$key + 1];
$html = str_replace($matches[$key], $replace, $html);

不是很优雅，但它有效。我仍然愿意接受其他建议。谢谢！

于 2013-03-24T21:55:15.317 回答