html - 动态左浮动 UL 在左浮动 DIV 内

Question

我正在努力实现以下行为:

在搜索结果 网站上，我有两个容器。

Container 1 和 Container 2 是具有 float: left 属性的 DIV。

在 Container 2 内部是一个 UL，其中包含可变数量的 LI 元素。

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

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

或者，如果视口(viewport)的宽度(响应式布局)不能同时容纳两个容器，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

因此，如果在没有结果时将 container1 从 html 中完全删除，那么您可以像这样在 CSS 中执行此操作...

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

.container2 ul li {
    float: left;

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

所以解释一下。我将 float:left 添加到 li 项，然后如果存在 container1，我会用 float:none 覆盖它。根据您的需要进行调整。