0

私のjQueryを正しくするのに問題があります。基本的に、divをクリックしたい.fadeOutは、その隣にある他の2つの「インラインブロック」divです。「クリックされた」div を同じ位置に保持し、.fadeIn 別の (非表示の) div を保持します。私が直面している問題は、他の2つがフェードアウトすると「クリックされた」divの位置が移動し、他の(隠れた)divが正しく表示されることです。要素の配置を変更することを提案するいくつかの同様の投稿をフォローしましたが、それは私が持っているうまくレイアウトされたスタイルに影響します. （初投稿なので長文失礼します！）

また、コンテナーの右側にある「非表示」の div をどのように取り込むかについてもわかりません。

html は次のとおりです。

<div id = "maincontainer">
   <div id ="container">
    <div id = "table1">
        <table>
            <tr><td> <img src = "https://si0.twimg.com/profile_images/3109305038/9db39242a7a4024666eb202871ba6bd8_normal.jpeg" /></td></tr>
            <tr><td><p> some text </p></td></tr>
         </table>
         </div>
         <div id = "table2">
        <table>
            <tr><td> <img src = "https://si0.twimg.com/profile_images/3109305038/9db39242a7a4024666eb202871ba6bd8_normal.jpeg" /></td></tr>
            <tr><td><p> some text </p></td></tr>
         </table>
         </div>
         <div id = "table3">
        <table>
            <tr><td> <img src = "https://si0.twimg.com/profile_images/3109305038/9db39242a7a4024666eb202871ba6bd8_normal.jpeg" /></td></tr>
            <tr><td><p> some text </p></td></tr>
         </table>
         </div>
         </div>
         </div>

jQuery:

   $(document).ready(function(){
$('#table1').click(function(){
    $('#table2').fadeOut(1000);
    $('#table3').fadeOut(1000); 
});
});

CSS:

#maincontainer  {
background-color: white;
width: 968px;
height: auto; 
margin: auto;
margin-top: 65px;
margin-bottom: 65px;
}
#container  {
height: 556px;
width: 100%;
margin: auto;
text-align: center;
background-color: blue;
}
#table1 {
height: auto;
margin: auto;
width: 202px;
text-align: center;
display: inline-block;
padding: 45px;
}
#table2 {
height: auto;
margin: auto;
width: 202px;
text-align: center;
display: inline-block;
padding: 45px;
}
#table3 {
height: auto;
margin: auto;
width: 202px;
text-align: center;
display: inline-block;
padding: 45px;
}

デモ:フィドル

4

1 に答える 1

0

float: left;3 つのテーブルすべてに追加

デモ:フィドル

補足: #table1、#table2およびで同じスタイルを繰り返す代わりに、3 つの要素すべてに#table3クラスを追加し、CSS ルールを追加できます。table

div.table {
    height: auto;
    margin: auto;
    width: 202px;
    text-align: center;
    display: inline-block;
    padding: 45px;
    float: left;
}

デモ:フィドル

于 2013-04-30T04:21:05.180 に答える