0

这是我一段时间以来一直遇到的问题。

在第一张图片中，您可以在单击展开之前看到我的布局部分：

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") 完全不受从它上掉下来的子面板的影响。万分感谢！

4

1 回答 1

1

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

至于修复它，我找不到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:28pxon进行一些修改，#Hidden因为它会根据您的#Evendiv 的大小而有所不同。（这样当 div 出现时它不会覆盖你的#Evendiv）

于 2012-08-10T18:58:56.980 回答