0

我在相对定位的 div 中有两个绝对定位的子 div。我在使两个绝对定位的子 div 可扩展而不相互重叠时遇到了麻烦。我已经尝试了各种不同的方法。我还查看了这个绝对位置，但调整了父级，但我需要我的子 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;
}
4

3 回答 3

0

我认为您将不得不考虑除了 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>

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

于 2013-07-23T13:54:07.043 回答
0

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

于 2013-07-22T20:32:11.980 回答
0

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

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%;
}
于 2013-07-22T20:36:28.133 回答