1

2つの列がほぼ同じ高さになるように、左から右への「オーバーフロー」で上から下まで異なる高さのいくつかのdivで満たされた2つの列を持つデザインを実現しようとしています。

例：

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 に答える