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

Question

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

>

• 父母 ---------------------------------------------------------------------------------
  |-孩子 ------------|
  |----------------------|
  |-------------------------------------------|
  |
  |
  |-----------------------------------------------------------------------------------------

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

• 父母----------------------------------------------------------------------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应随父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%;
}

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