2

より良いデザイン アプローチや、Google で簡単に検索できるフレーズがあれば、お気軽にお知らせください。すぐに削除します。残念ながら、私は正しい用語をグーグルで検索しているとは思いません。

説明をスキップするには、下部にフィドルへのリンクがあります。

私は常に右側にある必要があり、決して押し下げられない右側の柱を持っています。

右側の列と衝突するまでインラインにする必要がある左側の要素があり、その後、次の行にクリアする必要があります。

これは、左側の要素を左にフロートさせ、右の列を右にフロートさせることで実現できると想定しました。左側の各要素の幅が可変であるため、左側の要素を 1 つもクリアできません。

HTML

<div class='left-el'>
    <ul>
        <li>Variable width</li>
        <li>Variable height</li>
        <li>Left margin must always be against left-side</li>
    </ul>
</div>
<div class='left-el'>
    This column needs to move to the next<br/> 
    line since there is no room left. <br/>
    Instead, it pushes the right-floated div down<br/> 
    to make room.
</div>
<div id='right-col'>
    <ul>
        <li>Variable width</li>
        <li>100% height</li>
        <li>Right margin must always be against right-side</li>
    </ul>
</div>​

CSS

.left-el {
    background-color: orange;            
    float: left; 
    margin-right: 10px;
}

#right-col {
    background-color: green;
    float: right; 
    height: 100%;
}​

条件

  • 右の列は常に右揃えにする必要があります
  • 右の列は可変幅でなければなりません
  • 左の要素は可変幅でなければなりません
  • 左の要素は右の列に干渉してはなりません

これは私が取り組んでいるものです: http://jsfiddle.net/TmSuD/ (上記のマークアップ)

おそらく、ここにテーブルが適切ですか？

4

1 に答える 1

1

HTMLで右の列を左の列の上に配置すると、必要なことが行われると思います。

于 2012-04-20T21:21:55.333 に答える