Question

让我的jQuery正确无法解决问题。基本上我想点击一个div，.fadeOut旁边的另外两个'inline-block'div。保持'clicked'div在同一位置以及.fade在另一个（隐藏）div中。我面临的问题是，当其他两个淡出时，“点击”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;
}

演示：Fiddle

Answer 1

将float: left;添加到所有三个表

演示：Fiddle

旁注：不要为#table1，#table2和#table3重复相同的样式，而是可以为所有三个元素添加一个类table并添加一个css规则

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

演示：Fiddle

jQuery fadeOut'inline-block'div fadeIn“inline-block”div

1 个答案: