Question

我正在试图弄清楚是否有一种方法只使用HTML和CSS在页面中构建响应其他元素的元素，而不是使用@media和传统响应的浏览器大小设计。

例如，我有一个900px宽的元素。它有时可以包含1,2或3个子元素。我希望子元素可以根据有多少兄弟元素来设置样式并显示其他元素。

例如

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

VS

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

子元素会以不同的方式出现 - 不同的宽度，不同的填充，边框......并且它们也会有子元素，这些子元素将隐藏在第一个样本中，但显示在第二个样本中。

我知道这可以用JS，PHP完成......但是我试图看看有没有办法在没有它的情况下完成它。由于我还想根据其他子元素的存在隐藏/显示特定元素，因此使用相对大小（例如％）不会削减它。

由于

Answer 1

有可能使用 CSS3 ，我花了几分钟才弄明白。

查看http://jsfiddle.net/Vdz7s/。

HTML：

<h1>One:</h1>
<div class="parent">
    <div class="child">1</div>
</div>

<h1>Two:</h1>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
</div>

<h1>Three:</h1>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>

CSS：

.parent .child:nth-last-child(1)
{
    border:1px solid yellow;
}

.parent .child:nth-last-child(2),
.parent .child:nth-last-child(2) ~ .child
{
    border:1px solid orange;
}

.parent .child:nth-last-child(3),
.parent .child:nth-last-child(3) ~ .child
{
    border:1px solid red;
}

我认为代码非常不言自明，那么你只需要针对孩子的孩子并随心所欲地做任何事情。

页内响应式CSS？

1 个答案: