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は、 div#Hiddenの大きさによって異なるため、多少の調整が必要になる可能性があります。#Even(これは、div が表示されたときに div をカバーしないようにするためです#Even)

于 2012-08-10T18:58:56.980 に答える