0

基本的に、ワードプレスのカスタムテンプレートに表示される一連のカスタムタイプのブログ投稿があります。これらのブログ投稿は、コンテンツに応じて高さが可変の「ボックス」になります。

2 行目または次の行が次の 3 つの div をフラッシュして、div を最高の div に垂直に配置するのではなく、それ自体の上の各 div のすぐ下になるようにするために解決する必要がある問題前の行。

したがって、div の最初の行に、高さ = 120px の div1、高さ = 100px の div2、高さ = 160px の div3 が含まれているとします。次に、div の 2 行目は、div の最初の行の高さに関係なく、それらのそれぞれの下に 20 ピクセル表示する必要があります。

これを行うための最良のアプローチは何ですか? 誰かが私にCSSまたはJqueryの例を提供できれば. よろしくお願いします！

4

4 に答える 4

0

必要なのはFluid Layoutです。px は使用せず、ems または % を使用してください。

于 2013-05-11T02:15:07.243 に答える
0

レスポンシブ レイアウトの使用を検討することもできます。見て開発するのに良いものは次のとおりです。

Foundation フレームワーク Twitter ブートストラップ

または、@media クエリを使用することもできます。

よろしく、マット

于 2013-05-11T02:22:57.417 に答える
0

WordPress のテーマでは、php を使用できます。最初に列を作成し、それらをすべて同じ行に配置します。

<html>
<body>  
<?
define('NUMBEROFCOLUMNS',3);
define('NUMBEROFTEXTS',15);
$dummytext = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a neque vehicula nunc sollicitudin ultricies. In turpis arcu, tincidunt vel malesuada quis, tincidunt sit amet nisi. Etiam vitae lorem arcu. Proin sit amet nisi mi. Fusce mollis risus quis magna tristique viverra. Etiam varius posuere.';


$columns = array();
/* initialize */
for($i=0; $i<NUMBEROFCOLUMNS; $i++)
{
    $columns[$i]='';
}   
for($i=0; $i<NUMBEROFTEXTS; $i++)
{
    $columns[$i%NUMBEROFCOLUMNS] .= '<div style="margin-top:20px;border: red 1px solid;">'.substr($dummytext,0,rand(100,300)).'</div>';
}

?>
<div class="row">   
<?
$width =round(100/NUMBEROFCOLUMNS);
foreach($columns as $column)
{
    ?>
        <div style="width: <?=$width?>%;float:left;"><?=$column?></div>
    <?
}   
?>
</div>
</body>
</html>
于 2013-05-12T09:53:58.207 に答える