讓父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的所有空間

回答

相關問題