如何放大div而不移动其他元素 [英] How to enlarge a div without moving other elements
本文介绍了如何放大div而不移动其他元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何停止此div将所有元素移动到您选择某个价格的位置？
要查看我在说什么，请查看此链接：查看价格表样式3
下面您可以看到，当您选择某些价格表下面的所有元素都是移动的，因为弹出。我想要能够使用这个功能，但当然不会移动下面的所有元素。
我该如何做？
以下是指向Javascript的链接： JS
编辑：
我发布相关HTML：
<！ - DC定价表：3开始 - >
< div class =tsc_pricingtable03 tsc_pt3_style1>
< div class =caption_column>
< ul>
< li class =header_row_1 align_center radius5_topleft>< / li>
< li class =header_row_2>
< h2 class =caption>选择计划< / h2>
< / li>
< li class =row_style_4>< span>网络空间< / span>< / li>
< li class =row_style_2>< span> Bandwidth< / span>< / li>
< li class =row_style_4>< span>电子邮件帐户< / span>< / li>
< li class =row_style_2>< span> MySQL数据库< / span>< / li>
< li class =row_style_4>< span>< a href =＃class =tooltip =基于网络的控制面板系统> CPANEL< / a& / span>< / li>
< li class =row_style_2>< span>< a href =＃class =tooltip =24/7通过电话，电子邮件， 7支持< / a>< / span>< / li>
< li class =footer_row>< / li>
< / ul>
< / div>
< div class =column_1>
< ul>
< li class =header_row_1 align_center>
< h2 class =col1> starter< / h2>
< / li>
< li class =header_row_2 align_center>
< h1 class =col1> $< span> 5< / span>< / h1>
< h3 class =col1>每个月< / h3>
< / li>
< li class =row_style_3 align_center>< span>< a href =＃class =tooltip =Lorem ipsum dolor sit amet，consectetur adipiscing elit。> 10GB< / a>< / span>< / li>
< li class =row_style_1 align_center>< span>< a href =＃class =tooltip =Lorem ipsum dolor sit amet，consectetur adipiscing elit。> 100GB< / a>< / span>< / li>
< li class =row_style_3 align_center>< span>< a href =＃class =tooltip =Tooltip info。> 1< / a>< / span> ;< / li>
< li class =row_style_1 align_center>< span>< a href =＃class =tooltip =Lorem ipsum dolor sit amet，consectetur adipiscing elit。> 1< / a>< / span>< / li>
< li class =row_style_3 align_center>< span class =pricing_no>< / span>< / li>
< li class =row_style_1 align_center>< span class =pricing_yes>< / span>< / li&
< li class =footer_row>< a href =class =tsc_buttons2 grey>注册！< / a>< / li>
< / ul>
< / div>
< div class =column_2>
< ul>
< li class =header_row_1 align_center>
< h2 class =col2> basic< / h2>
< / li>
< li class =header_row_2 align_center>
< h1 class =col2> $< span> 10< / span>< / h1>
< h3 class =col2>每月< / h3>
< / li>
< li class =row_style_4 align_center>< span>< a href =＃class =tooltip =Lorem ipsum dolor sit amet，consectetur adipiscing elit。> 30GB< / a>< / span>< / li>
< li class =row_style_2 align_center>< span>< a href =＃class =tooltip =Lorem ipsum dolor sit amet，consectetur adipiscing elit。> 200GB< / a>< / span>< / li>
< li class =row_style_4 align_center>< span>< a href =＃class =tooltip =Tooltip info。> 10< / a>< / span> ;< / li>
< li class =row_style_2 align_center>< span>< a href =＃class =tooltip =Lorem ipsum dolor sit amet，consectetur adipiscing elit。> 10< / a>< / span>< / li>
< li class =row_style_4 align_center>< span class =pricing_yes>< / span>< / li>
< li class =row_style_2 align_center>< span class =pricing_yes>< / span>< / li&
< li class =footer_row>< a href =class =tsc_buttons2 gray>注册！< / a>< / li>
< / ul>
< / div>
< div class =column_3>
< ul>
< li class =header_row_1 align_center>
< h2 class =col3> pro< / h2>
< / li>
< li class =header_row_2 align_center>
< h1 class =col3> $< span> 29< / span>< / h1>
< h3 class =col3>每月< / h3>
< / li>
< li class =row_style_3 align_center>< span>< a href =＃class =tooltip =Lorem ipsum dolor sit amet，consectetur adipiscing elit。> 100GB< / a>< / span>< / li>
< li class =row_style_1 align_center>< span>< a href =＃class =tooltip =Lorem ipsum dolor sit amet，consectetur adipiscing elit。> 500GB< / a>< / span>< / li>
< li class =row_style_3 align_center>< span>< a href =＃class =tooltip =Tooltip info。> 50< / a>< / span> ;< / li>
< li class =row_style_1 align_center>< span>< a href =＃class =tooltip =Lorem ipsum dolor sit amet，consectetur adipiscing elit。> 50< / a>< / span>< / li>
< li class =row_style_3 align_center>< span class =pricing_yes>< / span>< / li>
< li class =row_style_1 align_center>< span class =pricing_yes>< / span>< / li&
< li class =footer_row>< a href =class =tsc_buttons2 grey>注册！< / a>< / li>
< / ul>
< / div>
< div class =column_4>
< ul>
< li class =header_row_1 align_center radius5_topright>
< h2 class =col4> biz< / h2>
< / li>
< li class =header_row_2 align_center>
< h1 class =col4> $< span> 39< / span>< / h1>
< h3 class =col4>每月< / h3>
< / li>
< li class =row_style_4 align_center>< span>< a href =＃class =tooltip =Lorem ipsum dolor sit amet，consectetur adipiscing elit。& / a>< / span>< / li>
< li class =row_style_2 align_center>< span>< a href =＃class =tooltip =Lorem ipsum dolor sit amet，consectetur adipiscing elit。> 1000GB< / a>< / span>< / li>
< li class =row_style_4 align_center>< span>< a href =＃class =tooltip =Tooltip info。>无限< / a>< / span> ;< / li>
< li class =row_style_2 align_center>< span>< a href =＃class =tooltip =Lorem ipsum dolor sit amet，consectetur adipiscing elit。& / a>< / span>< / li>
< li class =row_style_4 align_center>< span class =pricing_yes>< / span>< / li>
< li class =row_style_2 align_center>< span class =pricing_yes>< / span>< / li&
< li class =footer_row>< a href =class =tsc_buttons2 grey>注册！< / a>< / li>
< / ul>
< / div>
< / div>
<！ - DC定价表：3结束 - >
< div class =tsc_clear>< / div> <！ - line break / clear line - >
和CSS：
div.tsc_pricingtable03 div.column_1，
div.tsc_pricingtable03 div.column_2，
div.tsc_pricingtable03 div.column_3，
div.tsc_pricingtable03 div.column_4 {/ * transitions * / -webkit-transition：box-shadow 0.1s ease; -moz-transition：box-shadow 0.1s ease; -o-transition：box-shadow 0.1s ease; -ms-transition：box-shadow 0.1s ease; transition：box-shadow 0.1s ease;}
div.tsc_pricingtable03 div.column_1：hover，
div.tsc_pricingtable03 div.column_2：hover，
div.tsc_pricingtable03 div.column_3：hover，
div.tsc_pricingtable03 div.column_4：hover {position：relative; z指数：100; left：-5px; top：-15px; / * shadow * / box-shadow：5px 0px 30px rgba（0，0，0，0.5）; -webkit-box-shadow：5px 0px 30px rgba（0，0，0，0.5）; -moz-box-shadow：5px 0px 30px rgba（0，0，0，0.5）;}
解决方案
查看以下更正的CSS规则。
div.tsc_pricingtable03 div.column_1：hover ，
div.tsc_pricingtable03 div.column_2：hover，
div.tsc_pricingtable03 div.column_3：hover，
div.tsc_pricingtable03 div.column_4：hover {
位置：相对;
z-index：100;
left：-5px;
top：-15px;
box-shadow：5px 0px 30px rgba（0，0，0，0.5）;
-webkit-box-shadow：5px 0px 30px rgba（0，0，0，0.5）;
-moz-box-shadow：5px 0px 30px rgba（0，0，0，0.5）;
margin-bottom：-30px; ///注意添加删除底部边距，所有非活动元素都有
}
这是必需的，因为你给包装器100％的高度，所以它将始终维持24px填充。然而，为了保持：hover 元素不改变包装器的高度，你需要有该元素专门删除包装器添加的所有填充，以有效地忽略它。 p>
How can I stop this div to move all elements below where you select certain price?
To see what I am talking about please look at this link: Check the price table style 3 below that you can see that when you select certain price table all of the elements below are moving because of the pop-out. I want to be able to use this feature but of course without moving all of the elements below.
How can I do that?
Here is the link to a Javascript:JS
EDIT:
I am posting relevant HTML:
<!-- DC Pricing Tables:3 Start -->
<div class="tsc_pricingtable03 tsc_pt3_style1">
<div class="caption_column">
<ul>
<li class="header_row_1 align_center radius5_topleft"></li>
<li class="header_row_2">
<h2 class="caption">Choose plan</h2>
</li>
<li class="row_style_4"><span>Web Space</span></li>
<li class="row_style_2"><span>Bandwidth</span></li>
<li class="row_style_4"><span>E-mail accounts</span></li>
<li class="row_style_2"><span>MySQL databases</span></li>
<li class="row_style_4"><span><a href="#" class="tooltip" rel="Web-based control panel system">CPANEL</a></span></li>
<li class="row_style_2"><span><a href="#" class="tooltip" rel="24/7 Support via Phone, Email, Web.">24/7 Support</a></span></li>
<li class="footer_row"></li>
</ul>
</div>
<div class="column_1">
<ul>
<li class="header_row_1 align_center">
<h2 class="col1">starter</h2>
</li>
<li class="header_row_2 align_center">
<h1 class="col1">$<span>5</span></h1>
<h3 class="col1">per month</h3>
</li>
<li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">10GB</a></span></li>
<li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">100GB</a></span></li>
<li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">1</a></span></li>
<li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">1</a></span></li>
<li class="row_style_3 align_center"><span class="pricing_no"></span></li>
<li class="row_style_1 align_center"><span class="pricing_yes"></span></li>
<li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
</ul>
</div>
<div class="column_2">
<ul>
<li class="header_row_1 align_center">
<h2 class="col2">basic</h2>
</li>
<li class="header_row_2 align_center">
<h1 class="col2">$<span>10</span></h1>
<h3 class="col2">per month</h3>
</li>
<li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">30GB</a></span></li>
<li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">200GB</a></span></li>
<li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">10</a></span></li>
<li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">10</a></span></li>
<li class="row_style_4 align_center"><span class="pricing_yes"></span></li>
<li class="row_style_2 align_center"><span class="pricing_yes"></span></li>
<li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
</ul>
</div>
<div class="column_3">
<ul>
<li class="header_row_1 align_center">
<h2 class="col3">pro</h2>
</li>
<li class="header_row_2 align_center">
<h1 class="col3">$<span>29</span></h1>
<h3 class="col3">per month</h3>
</li>
<li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">100GB</a></span></li>
<li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">500GB</a></span></li>
<li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">50</a></span></li>
<li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">50</a></span></li>
<li class="row_style_3 align_center"><span class="pricing_yes"></span></li>
<li class="row_style_1 align_center"><span class="pricing_yes"></span></li>
<li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
</ul>
</div>
<div class="column_4">
<ul>
<li class="header_row_1 align_center radius5_topright">
<h2 class="col4">biz</h2>
</li>
<li class="header_row_2 align_center">
<h1 class="col4">$<span>39</span></h1>
<h3 class="col4">per month</h3>
</li>
<li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Unlimited</a></span></li>
<li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">1000GB</a></span></li>
<li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">Unlimited</a></span></li>
<li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Unlimited</a></span></li>
<li class="row_style_4 align_center"><span class="pricing_yes"></span></li>
<li class="row_style_2 align_center"><span class="pricing_yes"></span></li>
<li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
</ul>
</div>
</div>
<!-- DC Pricing Tables:3 End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->
And the CSS:
div.tsc_pricingtable03 div.column_1,
div.tsc_pricingtable03 div.column_2,
div.tsc_pricingtable03 div.column_3,
div.tsc_pricingtable03 div.column_4 { /* transitions */ -webkit-transition:box-shadow 0.1s ease; -moz-transition:box-shadow 0.1s ease; -o-transition:box-shadow 0.1s ease; -ms-transition:box-shadow 0.1s ease; transition:box-shadow 0.1s ease;}
div.tsc_pricingtable03 div.column_1:hover,
div.tsc_pricingtable03 div.column_2:hover,
div.tsc_pricingtable03 div.column_3:hover,
div.tsc_pricingtable03 div.column_4:hover { position:relative; z-index:100; left:-5px; top:-15px; /* shadow */ box-shadow:5px 0px 30px rgba(0, 0, 0, 0.5); -webkit-box-shadow:5px 0px 30px rgba(0, 0, 0, 0.5); -moz-box-shadow:5px 0px 30px rgba(0, 0, 0, 0.5);}
解决方案
See the corrected css rule below.
div.tsc_pricingtable03 div.column_1:hover,
div.tsc_pricingtable03 div.column_2:hover,
div.tsc_pricingtable03 div.column_3:hover,
div.tsc_pricingtable03 div.column_4:hover {
position: relative;
z-index: 100;
left: -5px;
top: -15px;
box-shadow: 5px 0px 30px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 0px 30px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 0px 30px rgba(0, 0, 0, 0.5);
margin-bottom: -30px; /// Note the added removal of the bottom margin that all "non" active elements have
}
This is needed because you are giving the wrapper a 100% height so it will ALWAYS maintain that 24px padding. However, to keep the :hover element from changing the height of the wrapper you need to have that element specifically remove all the padding added by the wrapper to effectively ignore it.
这篇关于如何放大div而不移动其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
