Question

这个问题我已经遇到了一段时间。

在第一张图片中，您可以看到我的布局部分，然后点击它进行展开：

http://i.imgur.com/USnSS.png

点击查看上面文字后面的内容：

http://i.imgur.com/F5K3W.png

我不完全确定为什么会这样。

这是我的代码：

<html>
<head>
    <title>Program Status Page</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery("#Hidden").hide();
            //toggle the componenet with class msg_body
            jQuery("#Even").click(function()
            {
                jQuery(this).next("#Hidden").slideToggle(500);
            });
            jQuery("#Odd").click(function()
            {
                jQuery(this).next("#Hidden").slideToggle(500);
            });
            $("#Test").on("click", function(){
                if ( +$(".weight", this).text() < 50 )
                    $(this).appendTo("#unlikelyToBeCalled");
            });
        });

    </script>
</head>

<body class="body">

    <img class="Top" src="Top-Bar.png" />
    <h1> Likely to be called</h1><br />

    <div id="Likely">
        <div id="Even">
            <div class="ProgramName">Blah11332131231231231</div>
            <div class="ProgramGraph">Blah23412312313</div>
            <div class="Status">Blah</div>
        </div>
        <div id="Hidden">
            <div class="Weight"> 1234</div>
            <div class="Values">Value1: Blah</div>
            <div class="Overrides">Overrides</div>
        </div>
    </div>

    <img class="Bottom" src="Bottom-Bar.png" />
</body>

CSS非常基础。

body.body {
background-color: #d0c9c9;
min-width: 1600px;
height: 100%
overflow-x: hidden;
}
#Likely{
position:relative;
margin-left:auto;
margin-right:auto;
display: table;
font-size:24px;
width: 80%;
}
#Unlikely{
position:relative;
margin-left:auto;
margin-right:auto;
display: table;
font-size:24px;
width: 80%;
}
#Unable{
position:relative;
margin-left:auto;
margin-right:auto;
display: table;
font-size:24px;
width: 80%;
}
#Even{
display: table-row;
position:relative;
margin-left:auto;
margin-right:auto;
width: 80%;
font-size:24px;
width: 80%;
float: right;
}
#Odd{
display: table-row;
position:relative;
margin-left:auto;
margin-right:auto;
font-size:24px;
width: 80%;
float:right;
}
#Hidden{
 position:relative;
 display: table-row;
 height:40px;
 margin-left:auto;
 margin-right:auto;
 background-color: #336699;
 width: 80%;
}
.ProgramName{
display: table-cell;
width: 10%;
position:relative;
top:0;
left:0;
}
.ProgramGraph{
display: table-cell;
width: 60%;
position:relative;
top:0;
left:0;
}
.Status{
display: table-cell;
width: 10%;
position:relative;
top:0;
left:0;
}


.Weight{
display: table-cell;
width: 10%;
position:relative;
top:0;
left:0;
}
.Values{
display: table-cell;
width: 60%;
position:relative;
top:0;
left:0;
}
.Overrides{
display: table-cell;
width: 10%;
position:relative;
top:0;
left:0;
}
.Top{
position:relative; top: 0;
opacity: 0.95;
filter:alpha(opacity=95);
background-color:#131313;
width: 100%;
}
.Bottom{
position:absolute; bottom: 0;
opacity: 0.95;
filter:alpha(opacity=95);
background-color:#131313;
width: 100%;
}

我希望有人可以让上面的div（id =“Even”）完全不受子面板掉落的影响。万分感谢！

Answer 1

问题在于你对它们都有display: table-row;。浏览器试图将它们显示为同一个表中的行，因此当隐藏的div出现时它会将它们对齐在一起，因此它会强制#Even div移动。

至于修复它，我找不到使用display: table-row的理由，默认情况下它看起来没有它。之后你只需要进行一些调整就可以正确显示div。

#Even{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width: 80%;
    font-size:24px;
    width: 80%;
    float: right;
}

#Hidden{
    position:relative;
    height:40px;
    margin-left:auto;
    margin-right:auto;
    margin-top:28px;
    background-color: #336699;
    width: 80%;
}

我使用的是什么，它似乎工作。您可能需要对margin-top:28px #Hidden进行一些调查，因为它会根据#Even div的大小而有所不同。（这就是当div出现时它不会覆盖你的#Even div）

防止下调调整其上方的div

1 个答案: