2

非常に単純なcssの質問. ブロックをうまくフロートさせたいページがあります。

<div style="float: left; width: 620px;">
    <div style="float: left; width: 300px; background-color: Red; height: 230px;"></div>
    <div style="float: left; width: 300px; background-color: Blue; height: 330px;"></div>
    <div style="float: left; width: 300px; background-color: Green; height: 230px;"></div></div>

緑の div を赤の div のすぐ下に表示し、青の div の最後に揃えないようにしたいと思います。

順序を変更することは、DB から特定の順序で行われるため、私にとっては解決策ではありません。

よろしくジョナス

4

3 に答える 3

1

私があなたの要件を正しく理解していれば、以下が必要です。

Greenが Red のすぐ下になるように、 Bluedivをに変更しました。float: rightdivdiv

<div style="float: left; width: 620px;">
    <div style="float: left; width: 300px; background-color: Red; height: 230px;"></div>
    <div style="float: right; width: 300px; background-color: Blue; height: 330px;"></div>
    <div style="float: left; width: 300px; background-color: Green; height: 230px;"></div>
</div>

ワーキングデモ

于 2013-09-04T13:28:54.843 に答える
1 
<div style="float: left; width: 620px;">
    <div style="float: left; clear: left; width: 300px; background-color: Red; height: 230px;"></div>
    <div style="float: right; width: 300px; background-color: Blue; height: 330px;"></div>
    <div style="float: left;  clear: left; width: 300px; background-color: Green; height: 230px;"></div>
</div>

実例。

于 2013-09-04T13:23:53.253 に答える
0 
<div style="clear:left;float: left; width: 300px; background-color: Green; height: 230px;"></div>

また

<br><div style="float: left; width: 300px; background-color: Green; height: 230px;"></div>

また

<div style="float: left; width: 330px;">

それはあなた次第です。

于 2013-09-04T13:25:12.540 に答える