0

在让我的 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;
}

演示：小提琴

4

1 回答 1

0

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

演示：小提琴

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

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

演示：小提琴

于 2013-04-30T04:21:05.180 回答