如何將兩個div放在水平位置，如果父div中沒有​​足夠的空間

Question

我有一個父div，它可以垂直擴展和縮小。裏面有兩個孩子的div。我想根據父div的高度來定位孩子：

• vertical：如果父div的高度允許兩個孩子垂直放置。

  • 父------------------------------------------- --------------------------------------
    | -child1 ------- ----- |
    | ---------------------- |
    | -child2 --------------------------------- |
    | ------------------------------------------- |
    |
    |
    | ----------------------------------------------- ------------------------------------------

• horizo​​ntal ：如果父母的身高沒有足夠的空間讓孩子垂直放置。

  • 父------------------------------------------- --------------------------------------
    | -child1 ------- ------- || -child2 --------------------------------- |
    | ------------------------ || --------------------- ---------------------- |
    | ----------------------------------------------- ------------------------------------------

我試圖設置父母的位置相對和兒童的位置絕對其中之一頂= 0和另一個底部= 0，但它們重疊時，父div縮小。

HTML代碼：

<div id="screen_header"> 
<div id="sh_header">Header text</div> 
<div id="sh_subheader">Explanation text</div> 
</div> 

CSS代碼：

#screen_header{ 
position: relative; 
} 
#sh_header{ 
font-size: 24px; 
padding: 10px; 
position: absolute; 
top: 0px; 
} 
#sh_subheader{ 
padding-left: 10px; 
position: absolute; 
bottom: 0px; 
} 

任何想法？

謝謝

Answer 1

如果您對於他們應該與父DIV收縮母公司的寬度孩子div的寬度。例如HTML：

<div id="parent"> 
<div id="child1"></div> 
<div id="child2"></div> 
</div> 

CSS：

#parent { 
    width: 100%; 
    height: 100%; 
} 

#child1{ 
    float: left; 
    width: 50%; 
    height: 50%; 
} 

#child2{ 
    float: right; 
    width: 50%; 
    height: 50%; 
} 

這僅僅是概念的代碼，將需要修改，以滿足您的需求。