Question

我在相对定位的div中有两个绝对定位的子div。我有麻烦使两个绝对定位的子div可扩展而不会相互重叠。我已经尝试了各种不同的方法。我也看了这个position absolute but resize parent，但我需要我的孩子div绝对不是相对的。

此外，这适用于移动设备到平板电脑尺寸的浏览，因此所有宽度都已达到100％。

编辑：我只需要.child2在高度上可扩展，因为.child1是一个图像，它的高度始终是200px。

我的示例代码：

<div class="parent">
    <div class="child1">
        <h2>Client</h2>
        <h4>Client Name</h4>
    </div>    
    <div class="child2">
        <img src="imageurl" />
    </div>
</div>
<div class="parent">
    <div class="child2">
        <img src="imageurl" />
    </div>    
    <div class="child1">
        <h2>Skills</h2>
        <h4>Skill Utilized</h4>
    </div>
</div>
<div class="parent">
    <div class="child1">
        <h2>Project URL</h2>
        <h4><a href="#">Link to Project</a></h4>
    </div>    
    <div class="child2">
        <img src="imageurl" />
    </div>
</div>

我的示例CSS：

.parent {
    position: relative;
    width: 100%;
    height: auto;
}

.child1 {
    position: absolute;
    top: 50px;
    width: 100%;
    height: 200px;
}

.child2 {
    position: absolute;
    top: 250px;
    width: 100%;
    height: auto;
}

Answer 1

您可以为两个div设置max-height或使用Javascript来检测div高度的总和是否大于父div的高度。

Answer 2

你需要给父母一个高度，否则代码不会意识到什么是顶部位置，什么是底部位置。

<强> CSS

.parent {
    position: relative;
    width: 100%;
height: 300px;
}

.child1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.child2 {
     position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

Answer 3

我认为除了html和css之外你还要考虑另外一个选项来解决这个问题。使用css位置将使其应用元素超出正常标记流程。在元素上使用position：relative不会考虑您可能已应用于其他元素的任何定位。你有多个元素的位置相对，但实际上并没有调出你想要它们相对于哪个或者你想要的位置，因此它们为什么堆叠。

如果您尝试创建一个完全动态且响应迅速的网站，该网站会调整为平板电脑和移动设备的分辨率，或许可以使用元标记“viewport”。

这是一个例子：

HTML

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum=-scale=1.0, initial-scale=1.0" />
        <title>Responsive Web Design</title>
        <link rel="stylesheet" type="text/css" href="css/screenStyles.css" />
        <link rel="stylesheet" type="text/css" href="css/screenLayoutLarge.css" />
        <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/screenLayoutSmall.css" />
        <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/screenLayoutMedium.css" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

使用视口元标记可以调出最小 - 最大宽度，然后引用不同的样式表以用于不同的屏幕分辨率。

可扩展的绝对定位子div

3 个答案: