使父div包含子div的所有空間

Question

我的父容器很小，無法容納我的孩子div。

這是父級div。

這是孩子div

如您所見，我的布局不好。

與我的代碼非常相似的示例在這里： http : //jsfiddle.net/buz72ck5/

部分代碼：

<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>

Answer 1

問題是在這個.additional-space-data-wrapper元素內部是另一個具有position:Absolute元素position:Absolute將其放在流文檔的外部，然后他的height為0 。

但是，如果您刪除該position則元素additional-space-data仍在父級上浮動，然后其高度= 0 ，則需要清除浮動。

嘗試這個：

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

檢查此DemoFiddle

Answer 2

這個怎么樣？ 我從.space-container {}中刪除了所有內容

您將不得不弄弄寬度，並且“列間距”中只有一項，但至少現在所有內容都在一行上。

.space-container {   
}

http://jsfiddle.net/l0nd0n/txyq4v1x/