css - 重构 wordpress 侧边栏以并排放置备用小部件

Question

我正在调整一个 Wordpress 网站以使主题响应。这包括侧边栏的替代显示模式，具体取决于用户查看页面的情况。

侧边栏当前的形式是:

<div id="sidebar">
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        ....
    </ul>
</div>

其中每个

都是一个侧边栏小部件。通常，侧边栏小部件在垂直列中一个显示在另一个下方，如下所示:

A
B
C
D
E
F

我想做的是，使用 CSS，使交替的边栏小部件在两列中并排显示，如下所示:

A B
C D
E F

到目前为止，我能够让它们按照以下样式适当排列......

#sidebar ul > li:nth-child(2n+1) {
    float: right;
}

...差不多。问题是，最终出现在侧边栏“B”和“D”位置的小部件非常短(一个是搜索框，另一个是注册表单)，但它们的顶部对齐无论如何垂直与“A”和“C”小部件。这会导致很大的差距。

有没有办法弥合这些差距并给人一种侧边栏具有两个独立列的错觉？还是有比我刚才描述的方法更好的方法？

Answer 1

也许如果您将 LI 元素向左浮动，然后在每个第 n 个子元素(在本例中为每个奇数子元素)上清除 float ？

像这样:

#sidebar li {
    float: left;
}
#sidebar li:nth-child(odd) {
    clear:both;
}