jQuery fadeOut 'inline-block‘fadeIn "inline-block“div

Question

有一些问题使我的jQuery正确。本质上，我想单击一个div，在它旁边插入另外两个‘inline- .fadeOut’div。保持‘点击’div在相同的位置，以及.fadeIn另一个(隐藏)的div。我面临的问题是，一旦其他两个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