在扩展 div 旁边停止 div 移动

Posted 2023-05-08

【中文标题】在扩展 div 旁边停止 div 移动

【英文标题】：Stop div beside expanding div from moving

【发布时间】：2022-01-13 15:12:37

【问题描述】：

我遇到了一个问题，当我扩展一个 div 时，它旁边的 div 也会向下移动。我想做的是阻止这种情况发生，但不确定我哪里出错了。

到目前为止我的代码：

    $(document).ready(function() 
  $(".projectTitle:nth-of-type(1)").hover(
    function() 
       $(".project").height(500);
    , function()
        $(".project").height(350);
    );
    $(".projectTitle:nth-of-type(2)").hover(
    function() 
       $(".project").height(700);
    , function()
        $(".project").height(350);
    );
    $(".projectTitle:nth-of-type(3)").hover(
    function() 
       $(".project").height(900);
    , function()
        $(".project").height(350);
    );
    $(".projectTitle:nth-of-type(4)").hover(
    function() 
       $(".project").height(500);
    , function()
        $(".project").height(350);
    );
);

#model 
    position: relative;
    top: 200px;
    text-align: center;


.project 
    position: relative;
    top: 30px;
    font-weight: bold;
    background-color: lightgray; /* Changing background color */
    font-weight: bold; /* Making font bold */
    border-radius: 70px; /* Making border radius */
    font-size: 22px; /* Changing font size */
    height: 350px;
    display:inline-block;
   width: 1830px;
   -webkit-transition:height, 1.5s linear;
    -moz-transition: height, 1.5s linear;
    -ms-transition: height, 1.5s linear;
    -o-transition: height, 1.5s linear;
    transition: height, 1.5s linear;


.projectTitle 
    position: relative;
    background-color: #009F4D;
    width: 350px;
    left: 90px;
    bottom: -110px;
    font-size: 25px;
    border-radius: 10px!important;
    padding: 20px 5px 20px 5px;


.projectTitle:nth-of-type(2) 
    position: relative;
    left: 520px;
    bottom: 10px;
    font-size: 18px;
    padding: 20px 5px 40px 5px;

.projectTitle:nth-of-type(3) 
    position: inherit;
    left: 950px;
    bottom: 130px; 

.projectTitle:nth-of-type(4) 
    position: inherit;
    left: 1380px;
    bottom: 250px; 


.arrow1 
    font-size:80px;
    color: #425563;
    position: absolute;
    top: 0;
    left: 355px;
    display: block;


.projectTitle:nth-of-type(2) .project 
    height: 500px;

.handoverExpanded 
    height:0px;
    -webkit-transition:height, 1.5s linear;
    -moz-transition: height, 1.5s linear;
    -ms-transition: height, 1.5s linear;
    -o-transition: height, 1.5s linear;
    transition: height, 1.5s linear;
    position: inherit;
    background-color: #001489;
    width: 300px;
    border-radius: 10px;
    font-size: 25px;
    left: 20px;
    opacity: 0;


.handoverExpanded p 
    font-size: 0px;



.projectTitle:hover > .handoverExpanded 
  height: 70px;
  color: white;
  opacity: 1;


.projectTitle:hover > .handoverExpanded p
    font-size: 15px;


.ModelHeader 
    padding-left: 50px;

<div id = "model">
<div class="project">
    <p class="ModelHeader" style="text-decoration: underline">Project Delivery Model</p>
    <div class = "projectTitle">
        <p>Project Handover</p>
        <div class ="handoverExpanded">
            <p>HSSEQ</p>
        </div>
        <div class ="handoverExpanded">
            <p>Project Management</p>
        </div>
        <span class ="arrow1">&#8594;</span>
    </div>
    <div class = "projectTitle">
        <p>Project Receipt & Phase Initiation</p>
        <div class ="handoverExpanded">
            <p>HSSEQ</p>
        </div>
        <div class ="handoverExpanded">
            <p>Project Management</p>
        </div>
        <div class ="handoverExpanded">
            <p>Engineering</p>
        </div>
        <div class ="handoverExpanded">
            <p>Project Controls</p>
        </div>
        <div class ="stageGate">
            <p>Stage Gate Review</p>
        </div>
        <span class ="arrow1">&#8594;</span>
    </div>
    <div class = "projectTitle">
        <p>Project Execution</p>
        <div class ="handoverExpanded">
            <p>HSSEQ</p>
        </div>
        <div class ="handoverExpanded">
            <p>Project Management</p>
        </div>
        <div class ="handoverExpanded">
            <p>Engineering</p>
        </div>
        <div class ="handoverExpanded">
            <p>Project Controls</p>
        </div>
        <div class ="handoverExpanded">
            <p>Construction</p>
        </div>
        <div class ="handoverExpanded">
            <p>Commissioning</p>
        </div>
        <div class ="stageGate">
            <p>Stage Gate Review</p>
        </div>
        <span class ="arrow1">&#8594;</span>
    </div>
    <div class = "projectTitle">
        <p>Project Close Out</p>
        <div class ="handoverExpanded">
            <p>HSSEQ</p>
        </div>
        <div class ="handoverExpanded">
            <p>Project Management</p>
        </div>
    </div>
    </div>
    </div>

还有一个 jsfiddle：http://jsfiddle.net/2wdnLujv/3/

我曾考虑过将位置设为绝对，但当 div 展开时我的动画不再起作用。那么有没有一种方法可以阻止扩展 div 旁边的 div 也向下移动？

【参考方案1】：

正如我所见，灰色容器的子项在容器中确实持有 RELATIVE 位置。这些位置随着父容器高度的变化而变化

解决方案

您可以使父级具有最大可能的高度以容纳子级（如果子级处于最小化状态，则不那么直观） 您可以为可展开项目的标题设置一个轴，带有一个倾斜点，当另一个正在展开时，它们都不会移动....（我会这样做）

我想要的那个，需要对你的代码进行很好的重构，你可以让父母（标题）有一个灵活的父容器，然后溢出相对于标题是绝对的，这样每个标题都包含它的孩子在它下面..

【讨论】：

我会看看 flex 父容器，谢谢你的建议 :)

youtube.com/channel/UC7TizprGknbDalbHplROtag ...我会推荐这个。排版最好的渠道之一，老师很厉害

嘿，抱歉忘记告诉你，你的想法很有效。我创建了一个父 flex 容器，projectTitle div 有一个绝对位置，扩展内容有一个相对位置，它工作得很好。感谢您的帮助！