动态浮动将UL留在浮动左侧DIV内

Question

我试图实现以下行为：

在Search Results网站上，我有两个容器。

Container 1和Container 2为DIV，且float: left属性。

内部Container 2是一个UL，其LI元素数量可变。

Container 1仅在搜索返回匹配条目时可见。 因此，HTML中根本不存在Container 1。

在这种情况下，我希望Container 2为全宽，LI元素为float: left

或者，如果视口（响应式布局）的宽度不适合两个容器，Container 2将折叠到新行。在这种情况下，我还希望Container 2为全宽，LI元素为float: left

当我将LI设置为float: left时，整个Container 2已经折叠为新行。此外，在尝试将LI设置为display: inline-block等Container 2时会崩溃。

你知道用CSS解决这个问题的优雅方法吗？我尝试了几种方法，但它没有用。

JSFiddle：https://jsfiddle.net/y8vctgun/1/

Answer 1

So if the container1 is completely removed from the html when no results are present then you can do this in CSS like so...

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

.container2 ul li {
    float: left;

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

So to explain. I added float:left to the li item and then if container1 is present I override it with float:none. Adjust it to your needs.