Question

如果absolut位于div之间，是否仍然可以自动放置示例#elem2个元素？

在代码段中，有三个#elem3元素放在它们之间。是否有可能为div和10px删除css样式指令，并构造一个一般规则，即div元素应放在它们之间，例如column1？因此，我可以使用css类margin-top轻松添加新的margin-bottom元素（可变高度），而不必分别担心#containerGraph { position: relative; width: 700px; height: 400px; border: 1px solid black; overflow:scroll; } /* set the position attribute for all div elements inside the mainContainer*/ #containerGraph > div { position: absolute; } .paramElement { width: 200px; max-height: 90px; border-radius: 18px; text-align: center; background-color: #e6e6e6; color: #4d4d4d; font-family: Verdana, Helvetica, sans-serif; padding-bottom:5px; font-size: small; } .column1{ margin-left:10px; } #elem2{ margin-top : 40px; } #elem3{ margin-top : 117px; } <div id="containerGraph" class="relative"> <div class="paramElement column1" id="elem1"> first </div> <div class="paramElement column1" id="elem2"> second with very large text text text text text text text text text text text text text </div> <div class="paramElement column1" id="elem3"> third </div> </div>。

{{1}}

{{1}}

Answer 1

这是一个奇怪的需求，我不知道如何解决它提出问题的方式。

但是，如果需要absolute位置，它似乎与containerGraph 相关（并且非常有用），但显然不适用于每个<div> 等等。

所以解决方案可能是：

插入containerGraph的{{1}}个孩子，absolute位置
它将包含（以前为absolute）其他<div> s

您可以在此代码段中看到它：

$('body').click(function() {
  $('#elem2').remove();
  $('#sub-container').append('<div  class="paramElement column1" id="elem4">fourth</div>');
});

#containerGraph {
    position: relative;
    width: 700px;
    height: 400px;
    border: 1px solid black;
    overflow:scroll;
}

/* set the position attribute for all div elements inside the mainContainer*/
#containerGraph > div {
    position: absolute;
}

.paramElement {
    width: 200px;
    max-height: 90px;
    border-radius: 18px;
    text-align: center;
    background-color: #e6e6e6;
    color: #4d4d4d;
    font-family: Verdana, Helvetica, sans-serif;
    padding-bottom:5px;
    font-size: small;
}

.column1{
margin-left:10px;
margin-bottom: 10px;
}
/*
#elem2{
 margin-top : 40px;
}

#elem3{
 margin-top : 117px;
}
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click anywhere to change
<hr />
<div id="containerGraph" class="relative">
<div id="sub-container">
  <div class="paramElement column1" id="elem1">
    first
  </div>
  
  <div class="paramElement column1" id="elem2">
    second with very large text text text text text text text text text text text text text 
  </div>
  
   <div class="paramElement column1" id="elem3">
    third
  </div>
</div>

</div>

是否有可能在自己之间自动放置absolut定位元素？

1 个答案: