0

サイドバーを左にフロートさせ、右にスライドショー (div、li など) をフロートさせ、その下に 2 列のブログ投稿を表示したいと思います (ここの左の図、数字はマークアップの順序を表します)。投稿はソースに表示されます）。スライドショーが表示されない場合があり、代わりに投稿を上に移動する必要があります (ここの右図)。

私は次のようなことを試みました：

div#sidebar {
float:left;
width:240px;
}

div#right_column {
margin-left: 260px;
}

div#right_column div#slideshow {
width:640px;
height:360px;
}

div#right_column ol#posts li.post.odd {
float:left;
clear:left;
}

div#right_column ol#posts li.post.even {
margin-left:320px;
}

<div id="container">
<div id="header"></div>

<div id="sidebar"></div>

<div id="right_column">
    <div id="slideshow"></div>

    <ol id="posts">
        <li class="post odd"></li>
        <li class="post even"></li>
        <li class="post odd"></li>
        <li class="post even"></li>
        <li class="post odd"></li>
    </ol>
</div>

<div id="footer"></div>
</div>

ただし、投稿はサイドバーをクリアします (サイドバーの横ではなく、サイドバーの下に移動します。

私も次のようなことを試みました：

div#sidebar {
float:left;
width:240px;
}

div#slideshow {
width:640px;
height:360px;
margin-left:260px;
}

ol#posts li.post.odd {
margin-left:260px;
}

ol#posts li.post.even {
float:right;
}

<div id="container">
<div id="header"></div>

<div id="sidebar"></div>

<div id="slideshow"></div>

<ol id="posts">
    <li class="post odd"></li>
    <li class="post even"></li>
    <li class="post odd"></li>
    <li class="post even"></li>
    <li class="post odd"></li>
</ol>

<div id="footer"></div>
</div>

しかし、右側の列の最初の投稿は、左側の列の最初の投稿の下に押し込まれます。

この質問は私が望むものと非常に似ていますが、可変高の投稿の 3 つの列を浮かせようとしていますが、必要なのは 2 つだけです。私はかなり近いので、純粋なCSSソリューションが必要だと思います。

あなたが提供できる助けに感謝します:)。

4

1 に答える 1

0

スライドショーのコードは問題ありません。あなたの問題はol、投稿に 1 つしか使用していないことに起因しています。

右の列の投稿は、左の列の最初の投稿の後に来るため、下に押し出されます (フロート右は、HTML コードで前に配置した場合にのみ、最初の投稿と同じレベルに 2 番目の投稿を配置します)。「奇数」を float leftに入れてみることができます。li

ただし、投稿の高さが異なるため、奇妙な動作が発生します。例：

ここに画像の説明を入力

ここでの最善の解決策は、2 つの列を使用することです。

  • 「奇妙な」投稿用の1つ
  • 「偶数」ポスト用

あなたのレイアウトは 1 つのPinterestに似ています:可変高さと複数の列。絶対位置を使用してこれを実現していますが、維持するのが難しいため、2 つの列を選択します。

于 2013-02-03T18:34:46.983 に答える