1

3 つの tds に分割された幅の広い div またはテーブルが必要です。中央のものは表示されています（これは、overflow:hidden と相対位置内の絶対位置を使用して別の div に配置することで実現しました）。中央のセクションにも 2 つのボタンがあります。私が必要とするのは、最初のものをクリックすると、div またはテーブル全体が右に移動して、左側のセクションが表示されることです。もう 1 つのボタンを押すと、全体が右に移動し、左側のセクションが表示されます。

チェックボックスのラベルを作成して、後で追加しようとしました：

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 に答える