0

我正在尝试创建一个仅 CSS选择的东西。我有一个带有三个单选按钮的容器。活动单选按钮必须放置在容器的中间（垂直）。单选按钮必须作为一个整体移动，这意味着如果选择顶部单选按钮，则其他两个必须在其下方隔开；如果选择了中间单选按钮，则其他单选按钮必须位于所选单选按钮的上方和下方。这很难解释，但听到的是我到目前为止所得到的。 http://jsfiddle.net/PaulvdDool/ZwdUL/1/

在此示例中，蓝色按钮位于容器的中间。当我选择绿色按钮时，所有三个按钮都必须向下移动 125px（一个按钮的高度）。但我不能让它工作。

选中一个单选按钮时，我似乎无法影响其他单选按钮。我试图在按钮周围放置一个额外的容器并更改边距顶部，但我无法影响容器。

<div id="extracontainer">
<form>
<radiobutton 1 + label>
<radiobutton 2 + label>
<radiobutton 3 + label>
</form>
</div>

我还尝试在按钮上方放置一个额外的 div 并更改高度，但我也无法影响这个 div。

<div id="spacer"></div>
<form radiobuttons>

我猜我使用了错误的选择器，做错了其他事情，或者试图用css做一些不可能的事情。

任何CSS解决方案？

4

2 回答 2

0

你真正需要的是 jQuery 或其他一些 JavaScript 库（或者如果你是一个原生 js 怪胎，一个纯 JavaScript）。您需要捕获事件，然后更改要更新的相应元素的 CSS 属性。

在这一点上，根本不可能通过 CSS 做到这一点。

我希望这有帮助。

于 2013-01-03T14:27:41.240 回答
0

这是可以做到的。这完全取决于具体情况以及文档结构。

我必须为每个标签添加一个类：cPantsx其中 x 与裤子收音机的数字相同。

然后我不得不重新排列html，如下所示：

<div id="pantscontainer">
    <input type="radio" name="pants" id="pants1" value="pants1" />
    <input type="radio" name="pants" id="pants2" value="pants1" />
    <input type="radio" name="pants" id="pants3" value="pants1" />
    <label for="pants1" class='cPants1'><span></span></label>
    <label for="pants2" class='cPants2'><span></span></label>
    <label for="pants3" class='cPants3'><span></span></label>
</div>​

一切都必须变成position:relative;这样我才能调整容器内的位置。

在那之后，魔法真的在这里发生了：

#pantscontainer > input[id="pants1"]:checked ~ .cPants1 span{
    top:125px;   
}
#pantscontainer > input[id="pants1"]:checked ~ .cPants2 span{
    top:-125px;   
}
#pantscontainer > input[id="pants2"]:checked ~ .cPants2 span{
    top:0px;
}
#pantscontainer > input[id="pants2"]:checked ~ .cPants1 span{
    top:0px;
}
#pantscontainer > input[id="pants3"]:checked ~ .cPants3 span{
    top:-125px;
}
#pantscontainer > input[id="pants3"]:checked ~ .cPants1 span{
    top:0px;
}
#pantscontainer > input[id="pants3"]:checked ~ .cPants2 span{
    top:125px;
}

基本上通过调整页面上元素的位置，我能够非常明确地定位有问题的元素，并确保它们总是相互移开。

这是你小提琴的一个叉子

我应该提到，这绝不是一个简单的解决方案。它更像是一个纸牌屋。如果您必须添加更多元素，则需要重新编写整个内容。它会扩展，但要做到这一点需要付出很多努力。

于 2013-01-03T15:48:26.257 回答