ダイナミックフロートは、フロート内のULを残し、私は次の動作に達成しようとしているDIV

Question

を左：

Search Resultsサイトでは、私は2個のコンテナを持っています。

Container 1およびContainer 2は、DIVであり、float: leftである。

内側Container 2は、可変量のLI要素を有するULである。

Container 1検索が一致するエントリを返した場合にのみ表示されます。 したがって、Container 1がHTMLにまったく存在しないことがあります。

その場合、私はContainer 2がfloat: left

またはビューポート（応答レイアウト）の幅は、両方の容器に収まらない場合であることを全幅とLI要素になりたいです、 Container 2が新しい行に折りたたまれます。その場合、私はまた、Container 2がfloat: left

するLI要素全幅になりたい私は単にfloat: leftにLIを設定すると、全体Container 2すでに新しい行に崩壊します。また、代替としてLIをdisplay: inline-blockなどに設定しようとすると、Container 2が崩壊します。

これをCSSで解決するうまい方法が分かりますか？私はいくつかのアプローチを試みましたが、うまくいきません。

JSFiddle：container1は完全には結果が存在しないHTMLから削除された場合https://jsfiddle.net/y8vctgun/1/

Answer 1

それではあなたはそう説明するので...

.container1 + .container2 li { 
    float: none!Important; 
} 

.container2 ul li { 
    float: left; 

    margin-right: 20px; 
    padding: 4px; 
    background-color: #0f0; 
    color: #000; 
} 

のようにCSSでこれを行うことができます。 float：leftをli項目に追加し、container1が存在する場合はfloat：noneでオーバーライドします。あなたのニーズに合わせて調整してください。