如何在不移动其他元素的情况下放大 div答案

【问题标题】：How to enlarge a div without moving other elements如何在不移动其他元素的情况下放大 div
【发布时间】：2013-01-03 06:08:36
【问题描述】：

如何阻止此 div 将所有元素移动到您选择特定价格的位置下方？

要了解我在说什么，请查看此链接：Check the price table style 3 在下方您可以看到，当您选择某个价格表时，由于弹出窗口，下面的所有元素都在移动。我希望能够使用此功能，但当然无需移动下面的所有元素。

我该怎么做？

这里是 Javascript 的链接：JS

编辑：

我正在发布相关的 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 -->

还有 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);}

【问题讨论】：

措辞令人困惑的问题。我相信他要问的是——当你将鼠标悬停在第三张桌子的一列上时——它会“弹出”。这种弹出效果会导致表格下方的元素向下移动。他想阻止这种转变。
请在您的问题中发布相关的 html 和 js（未链接），以及它们如何协同工作。所以问题应该避免“这是坏的 - 请去看看它并为我修复它”类型。
@mrtsherman 我只需要知道是什么造成了这种行为？因为实在看不出来。所有代码都在网页中...html, JS
SO 的一个重点是提供一个其他人可以利用的知识库。通过将您的代码放在可能会更改或 404 的外部网站上，您的问题对未来的人来说毫无用处。
如果您为 div 设置 magine（正在移动），您将能够解决此问题

标签： css html scale

【解决方案1】：

您还可以考虑使用 CSS transform 属性，该技术也用于您的第四个表格。例如：

.some_table .some-table-column:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

CSS 转换非常适合这种情况，因为它们 "allow to change the position of the affected content without disrupting the normal flow"。

【讨论】：

【解决方案2】：

请参阅下面更正后的 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 {

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
}

这是必需的，因为您为包装器提供了 100% 的高度，因此它将始终保持 24 像素的填充。但是，为了防止 :hover 元素改变包装器的高度，您需要让该元素专门删除包装器添加的所有填充以有效地忽略它。

【讨论】：

在问题 cmets.您应该真正发布该 html 和非 :hover 和 :hover css 的相关标记。您可以简单地复制和粘贴并点击代码格式按钮，这将确保始终保留所需的代码（与此问题相关）......无论您需要在您的网站上进行什么更改。
比我最初的想法更好（将容器div的高度设置为height+30），+1