1

我正在尝试编写 css 以根据页面上的元素自动设置我的列的样式。列有几种组合：

aside- article-aside

aside-article

article-aside

article

每个aside都有左或右的类别，具体取决于它在屏幕的哪一侧。aside无论布局如何， s 始终是恒定宽度，但'article宽度会根据布局而变化。

我想使用 CSS（最好没有任何 javascript）来设置article. 我一直在玩 CSS 兄弟姐妹，但我不能让它工作。这就是我理论上希望代码工作的方式：

article{
   /* just article */
   width: some width;
   }
.left~article{
   /* aside-article */
   width: some width;
   }
.right~article{
   /* article-aside */
   width: some width; /* (this can be the same as the previous;
                         I don't know if it's easier to define
                         them together or separately) */
   }
.left~.right~article{
   /* aside-article-aside */
   width: some-width;
   }

前两种布局有效，但后两种无效。问题是我总是想为article. 分别使用选择器article~.right和.left~.article~.right最后两个布局找到正确的布局组合（即 an articlethen anaside或 an articlebetween two asides），但它针对最右边aside，我无法更改article.

有没有办法考虑所有兄弟姐妹是否在 DOM 中的目标元素之前使用 CSS 中的兄弟姐妹选择器？或者任何人都可以想到任何“创造性”的方法，我可以在不使用 javascript 的情况下解决这个问题？

谢谢！

4

1 回答 1

3

CSS3 解决方案

aside假设这些的包含元素只有or的直接子元素article，那么就有一个 CSS3 解决方案（所以 IE9+）。对于我在这里的示例，我假设元素的总体width宽度400px和标准宽度aside（尽管可能不同）。

aside {
    width: 100px;
}

aside.left + article,
article:first-child {
    width: 300px;
}

article:only-child {
    width: 400px; /* overrides article:first-child if it is only-child */
}

aside.left:nth-last-of-type(2) + article {
    width: 200px; /* only engages if there are two asides */
}
于 2012-11-21T21:08:01.783 回答