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

来源

2014-10-30 demo

'.additional空间数据，。左空间-group'是'的位置是：绝对的;'这需要它的公文流转，消除可能做的伎俩，虽然你代码可以做一些普通的整理。 – 2014-10-30 12:55:04

是的，我认为@HiddenHobbes是正确的 - 没有必要将“附加空间数据”块设置为'position：absolute;'（无论如何也不管这个和'float：left'是没有意义的）。 – Pointy 2014-10-30 12:58:14

@HiddenHobbes和@Pointy，谢谢，如果我设置'.space-container' style'display：inline-block'会不会好？ – demo 2014-10-30 13:01:01

问题是这里面.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

来源

2014-10-30 13:01:00 DaniP

谢谢！你能告诉我，如果我设置而不是'display：table' - 'display：inline-block'，会有什么不同？对我来说，在UI上没有什么区别，但在某些情况下可能会有一些差异 – demo 2014-10-30 13:05:30

在这种情况下，我只是使用显示的值表，因为伪元素需要该属性存在....但在结构上布局'表''或内联块可以满足许多不同的需求...内嵌块包装---表不需要---所有孩子都需要整个高度---内联块不包含@demo – DaniP 2014-10-30 13:08:59

这个怎么样？我从.space-container {}移除了所有内容{}

您必须调整宽度，并且列间距中只有一个项目，但至少所有内容都在一行中。

.space-container { 
}

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

来源

2014-10-30 13:11:27 Tone

如果您再添加一个'空间容器“，你会得到”叠加“。在我的情况下'space-container's可以超过1 – demo 2014-10-30 13:34:50

让父div包含子div的所有空间

回答

相关问题