html - 如果父div中没有​​足够的空间，如何将两个div水平放置

Question

我有一个可以垂直扩展和收缩的父级 div。里面有两个子div。我想根据父 div 的高度定位 child :

• 垂直:如果父 div 的高度允许两个子元素垂直放置。

  • parent -------------------------------------------- ----------------------------------
    |-child1 ----------|
    |------------------------|
    |-child2 ------------------------------|
    |----------------------------------------|
    |
    |
    |------------------------------------------------ --------------------------------------

• 水平:如果父 div 的高度没有足够的空间让子元素垂直设置。

  • parent -------------------------------------------- ----------------------------------
    |-child1 --------------||-child2 -------------------------- ----|
    |------------------------||--------------------- ------------------|
    |------------------------------------------------ --------------------------------------

我试过设置父级的相对位置和子级的绝对位置，其中一个为 top = 0，另一个为 bottom = 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 的宽度，它们应该随父 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%;
}

这只是概念代码，需要根据您的需要进行修改。