1

我整个上午都在尝试编写我认为很简单的代码。

  • 两长列内容，只有第一列可见
  • 单击链接时，第 1 列被隐藏，第 2 列变为可见
  • 两者都处于完全相同的位置，但是两者的长度不同且不同

我决定使用target伪类在列之间切换，设置一个显示的可见性。

这似乎有效，但我不完全理解我做了什么。另外，这些列下方的内容似乎在 z 轴上放置在它们下方，而不是在 y 轴上放置在它们下方。

我的两个（相关）问题：

  1. 我不确定我创建的逻辑到底是什么，我可以用简单的英文解释来做。
  2. 我不明白为什么两列和容器下方的 DIV 没有出现在 y 轴上。

这是我的CSS：

#container
{
    background-color: red;
    position: relative;
}

#schools-list
{
    width: 400px; /* Set the width of the visible portion of content here */
    height: 600px; /* Delete the height, let the content define the height */
    background-color: purple;
    position: absolute;
    top: 0;
    left: 0;
}

#boards-list
{
    width: 400px; /* Set the width of the visible portion of content here */
    height: 700px; /* Delete the height, let the content define the height */
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}

#container:target #schools-list
{
    visibility: hidden;
}

#container:target #boards-list
{
    visibility: visible;
}

这是我的 HTML：

<div id="container">

    <div id="boards-list">
    Boards List<br>
    Switch to <a href="">Schools List</a>
    Here's some content
    </div>

    <div id="schools-list">
    Schools List<br>
    Switch to <a href="#container">Boards List</a>
    Here's some other content
    </div>

</div>

<div>Why is this beneath everything?</div>
4

3 回答 3

3

绝对定位从页面流中删除一个项目。这就是导致底部 div 出现在下方的原因。

可见性将元素从视线中移除，但元素仍将占用空间。

我的建议是使用显示而不是可见性。

在和之间切换您的元素display:block并display:none删除绝对定位，您应该能够实现您想要的功能。

于 2012-05-03T19:54:49.880 回答
0

#borad-list 和 #school-list 都按位置从正常页面流中取出：绝对，这就是为什么你的容器高度应该是 0px，因为没有任何东西可以垂直占用任何空间。

我可以更好地解释它，但现在用我的手机写作，所以......我会试着给你一个起点。

于 2012-05-03T19:56:11.940 回答
0

通过使用 定位容器position:absolute，您可以将它们从页面的正常流程中移除。换句话说，您的其他内容就像那些容器根本不存在一样，而这些容器神奇地出现在内容的前面。

相反，您可能想要做的是删除容器的位置、顶部和左侧，并用于display:block显示和display:none隐藏容器。您还可以移除容器的高度，让内容自行决定需要多少空间。

于 2012-05-03T19:57:01.820 回答