jQuery 淡出 'inline-block' div 淡入 "inline-block"div

Question

在使我的 jQuery 正确时遇到一些问题。本质上我想点击一个 div，.fadeOut 旁边的另外两个“inline-block”div。将“点击”div 和 .fadeIn 另一个(隐藏)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