防止下拉大小调整div的大小

在第一张照片，你可以看到我的布局的一部分之前，我点击它，扩展它：

：

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”）完全不受子面板的影响。万分感谢！

来源

2012-08-10 A_Elric

问题出在你对他们两个都有的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%; 
}

是我用过的，它似乎工作。您可能需要在#Hidden上使用margin-top:28px做一些折腾，因为它会根据#Even div的大小而有所不同。（这是因为当div出现时它不会覆盖你的#Even格）

来源

2012-08-10 18:58:56 JeffS

防止下拉大小调整div的大小

回答

相关问题