Question

如果添加更多儿童DIV，我如何使父/容器DIV增长。

<div id="container">
     <div id="child" style="height:100px;">
     </div>
     <div id="child2" style="height:100px;">
     </div>
</div>

Answer 1

你的父div不会随其内容增长的唯一原因是，如果它的内容是绝对定位的或者是使用浮点数，在前一种情况下你没有什么可以做的，不能用javascript调整它的大小，在后者你可以将以下代码放在浮动元素的末尾：

<br style="clear: both">

所以说你的例子中的两个子元素都有一个浮点数，代码看起来像这样

<div id="container">
     <div id="child" style="height:100px;">
           ** CONTENT GOES HERE **
           <br style="clear: both">
     </div>
     <div id="child2" style="height:100px;">
           ** CONTENT GOES HERE **
           <br style="clear: both">
     </div>
</div>

您可以使用任何节点，只要您在其上使用“clear：both”（因此<div style="clear: both"></div>也可以使用）。

Answer 2

如果<div>内的内容已浮动，则不会展开。您可以通过将overflow:hidden CSS样式放置到父<div>来轻松解决此问题。请注意，如果孩子们都完全定位，这将不起作用。当您绝对定位元素时，您将其从文档流中取出。就定位而言，该元素不再是“孩子”，即使在语义上它仍然存在。

<div style="overflow:hidden">
  <div style="float:left">
    <!--Content-->
  </div>
  <div style="float:left">
    <!--Content-->
  </div>
</div>

Answer 3

在父div中使用display：table，即使其内容是浮动元素，也会增长。它使得div基本上就像一个表。

查看显示属性： http://www.w3.org/wiki/CSS/Properties/display

Answer 4

通常我会创建一个修复类：

.clearfix{clear:both;}

然后，您可以随时使用。

<div class='wrapperContainer'>
    <div class="classFloated">
         Content
    </div>
    <div class="clearfix"></div>
    <div class="classFloated">
         Content
    </div>
    <div class="clearfix"></div>
</div>

Answer 5

将display：flex添加到父div可能有用。

例如，我想要连续增加一个未知数量的圆，并以绝对定位的div为中心，该div随着添加的数量的增加而扩展。

#grandparent{

  width:300px;
  height:20px;
  position:absolute;
  right:30;
  bottom:30;

}

#parent{

  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  display: flex;

}


.children{

   background-color: white;
   border-radius: 50%;
   width: 16px;
   height: 16px;
   margin-left: 3px;
   margin-right: 3px;

}

请参见https://codepen.io/anon/pen/zXwRza

Answer 6

make(1) 或 ui <- fluidPage( tags$style(sprintf("input[type='radio']{width: %spx; height: %spx;}", 20, 20)), radioButtons(inputId="gender", "radioB", choices = list( "a","b")) ) server <- function(input, output) {} shinyApp(ui, server) 作用于父元素。

如何让父母与孩子一起成长？

6 个答案: