Question

我需要一个分为三个td的广泛div或表格。中间的一个是可见的（我通过将div放入另一个overflow:hidden并在相对位置内进行绝对定位来实现。中间部分还包含两个按钮。我需要的是当我们点击第一个时，整个div或表应向右移动以显示左侧部分。另一个按钮应该使整个事物向右移动以显示左侧部分。

我尝试将它们标记为复选框，然后添加：

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>

用两个按钮移动带有CSS的div或表

0 个答案: