Javascript 使父div包含子div的所有空间

我的父容器太小，无法容纳我的子div

这是家长部。

这是儿童组

正如你所看到的，我的布局很糟糕

与我的代码非常相似的示例如下：

代码的一部分：

<div class="space-container">
    <div class="space-main-data">
        <ul>
            <li>sp1</li>
            <li>59000</li>
            <li>20000</li>
            <li></li>
            <li style="float: right">
                <input type="hidden" value="355646" class="lease-space-id"><span>Available</span>
            </li>
    </ul>
</div>
<div class="additional-space-data-wrapper">
    <div class="additional-space-data">
        <dl class="ld-generalinfo-wrap ld-main-info">
            <dt>Date Available:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Term Range:&nbsp;</dt>
            <dd><strong>1-30</strong></dd>

            <dt>Lease Type:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Rental Rate Range:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Maximum Contiguous:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Dock High:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Minimum Divisible:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Drive In:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Office Space:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Clear Height:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt></dt>
            <dd></dd>

            <dt>Column Spacing:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>               

            <dt>Rail:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Yard:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>                             

            <dt>Power:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Truck Court:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>        
        </dl>
    </div>
</div>

sp1
59000
两万


可用


提供日期：
未上市
术语范围：
1-30
租赁类型：
未上市
租金范围：
未上市
最大连续：
未上市
船坞高度：
未上市
最小可除数：
未上市
免下车：
未上市
办公空间：
未上市
净高：
未上市
柱间距：
未上市
铁路：
未上市
院子：
未上市
权力：
未上市
卡车法庭：
未上市

---

问题出在这个

内部。附加空间数据包装器

元素是另一个

位置：绝对

在流文档外部，那么他的

高度

是

0

但是，如果您删除该

位置

元素附加空间数据仍在父元素上浮动，则等待，然后他的高度=

0

您还需要清除浮动

试试这个：

.additional-space-data {
   float: left;
   /*position:Absolute REMOVE THIS*/   
   width: 55%;
}
.additional-space-data-wrapper:after {
  display:table;
  content:" ";
  clear:both;
}

---

检查一下这个

这个怎么样？我从.space容器{}中删除了所有内容

您必须调整宽度，列间距中只有一项，但至少现在所有内容都在一行上

.space-container {   
}

---

。附加空间数据。左侧空间组
为
位置：绝对
将其从文档流中删除，尽管您的代码需要进行一些总体整理，但删除它可能会起到作用。是的，我认为@Hiddenhobes是正确的-不需要将“附加空间数据”块设置为
位置：绝对
（不管怎样，这和
float:left都没有意义）。@hiddenhobes和@Pointy，谢谢，如果我设置为
。space container
style
display:inline block
会好吗？谢谢！你能告诉我如果我设置而不是
display:table
-
display:inline block
，会有什么不同吗？对我来说，UI没有什么不同，但在某些情况下可能有一些不同。在这种情况下，我只使用显示的值表，因为伪元素需要该属性存在……但在结构上，布局
表
或内联块可以满足许多不同的需要。。。内联块换行---table don---table占用所有child的整个高度---inline block not@demo如果您再添加一个
空间容器
，您将获得“onlay”。在我的例子中，
空间容器
-s可以大于1