如何将两个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%; 
} 

这仅仅是概念的代码，将需要修改，以满足您的需求。