Question

我的父容器是小的，以包含我的子div。

这是父div。 parent

这是儿童div child

你可以看到我的布局不好。

与我的代码非常相似的例子是：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将其移到流文档之外，然后他的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/

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

2 个答案: