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

Question

我有一个可以垂直扩展和收缩的父 div。里面有两个儿童div。我想根据父 div 的高度来定位孩子：

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

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

• horizo​​ntally：如果父 div 的高度没有足够的空间让孩子垂直设置。

  • 父母 ---------------------------------- ----------------------------------
    |-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 的宽度，它们应该与父 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%;
}

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