1

我需要一个分为三个 td 的宽 div 或表格。中间是可见的（我通过将其放入另一个 div 中实现溢出：隐藏和相对定位中的绝对定位）。中间部分还包含两个按钮。我需要的是当我们单击第一个时，整个 div 或 table 应该向右移动以显示左侧部分。另一个按钮应该使整个东西向右移动以显示左侧部分。

我试图让它们成为复选框的标签，然后添加：

input#en:checked + div#bodywrapperfloat {
   animation: enslide 1s;
   animation-fill-mode: forwards;
}

但什么都没有移动（虽然复选框检查）。动画应该让它移动，但它没有。我认为原因可能是标签实际上在移动的 div 内。这是一个问题吗？你能推荐任何其他的CSS解决方案吗？

简而言之，我需要一个根据单击的按钮向左或向右移动的元素。

我正在添加一些我尝试与表一起使用的代码：

#bodywrapperfixed {
width: 1440px;
margin: 0px auto;
position: relative;
overflow: hidden;
height: 730px;
}


#bodywrapperfloat {
width: 4320px;
border: none;
position: absolute;
top: 0px;
left: -1440px;
table-layout:fixed;
color: #000;
border: 1px solid #ff0000;
}

table#ramka {
width: 4320px;
border: none;
table-layout:fixed;
color: #000;
border: none;
}


table#ramka td{
width: 1440px;
border: none;
}

table#linki {
width: 110px;
border: none;
margin-top:15px;
}

label {
  display: block;
  height: 54px;
  width: 54px;
  color:#fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 35px;
  background-color: #117D10;
  text-align: center;
  padding:23px;

}

label:hover {
  background-color: #004F00;
  cursor: pointer;
}

input#pl {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

input#en {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

动画：

@keyframes enslide
{
from {left:-1440px;}
to {left:0px;}
}

@-webkit-keyframes enslide
{
from {left:-1440px;}
to {left:0px;}
}

@-moz-keyframes enslide
{
from {left:-1440px;}
to {left:0px;}
}

@-ms-keyframes enslide
{
from {left:-1440px;}
to {left:0px;}
}

@-o-keyframes enslide
{
from {left:-1440px;}
to {left:0px;}
}


@keyframes plslide
{
from {left:-1440px;}
to {left:-2880px;}
}

@-webkit-keyframes plslide
{
from {left:-1440px;}
to {left:-2880px;}
}

@-moz-keyframes plslide
{
from {left:-1440px;}
to {left:-2880px;}
}

@-ms-keyframes plslide
{
from {left:-1440px;}
to {left:-2880px;}
}

@-o-keyframes plslide
{
from {left:-1440px;}
to {left:-2880px;}
}


input#en:checked + div#bodywrapperfloat {


     animation: enslide 1s;
     animation-fill-mode: forwards;

     -webkit-animation: enslide 1s;
     -webkit-animation-fill-mode: forwards;

     -moz-animation: enslide 1s; 
     -moz-animation-fill-mode: forwards;

     -ms-animation: enslide 1s; 
     -ms-animation-fill-mode: forwards;

     -o-animation: enslide 1s; 
     -o-animation-fill-mode: forwards;

}

HTML：

<div id="bodywrapperfixed">
<div id="bodywrapperfloat">
<table id="ramka">
     <tr>
          <td>left td</td>
          <td>center td

<table id="linki">
<tr>
<td><label for="en">en</label><input id="en" type="checkbox"></td>
<td><label for="pl">pl</label><input id="pl" type="checkbox"></td>
</tr></table>
</center>
</div></td>
          <td>right td</td>
     </tr>
</table>
</div></div>
4

1 回答 1

0

为了只使用 CSS，输入检查应该在文件流中的表之前，同级或低级。

选择器基本上是： 

:checked ~ table {
/* adjacent table further in the flow will receive style*/
}
:checked ~ div table {
/* adjacent div  further in the flow will send style to its table child */
}
于 2013-06-14T13:39:55.117 回答