试图让 img 的位置绝对位于其父 div 的底部答案

【问题标题】：Trying to make img's sit absolutely positioned at the bottom of their parent div试图让 img 的位置绝对位于其父 div 的底部
【发布时间】：2013-05-04 22:55:15
【问题描述】：

据我了解，您可以在其父级内使用绝对定位将其准确放置在您想要的任何位置。就像这里解释的那样：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

我试图让我的 img 元素位于其父 div 的底部，但是当我给 img 一个绝对位置时，布局会中断。似乎我需要为该部分或 div 分配一个高度，但似乎没有任何效果。

请注意，我在 css 中注释掉了图像的绝对定位，因此布局更美观

<head>

</head>

<body>

<section id="artImages">

<div id="artImage1">
    <img src="http://placekitten.com/288/200" alt="" />
</div>

<div id="artImage2">
    <img src="http://placekitten.com/144/160" alt="" />
</div>

<div id="artImage3">
    <img src="http://placekitten.com/673/300" alt="" />
</div>

</section>

</body>

CSS：

section {
    margin: 100 auto;
}

section#artImages {
    width: 673px;
    height: auto;
    position: relative;
    display: block;
}

    section#artImages div {
        float: right;
        height: auto;
        position: relative;
    }

        div#artImage1 {
            width: 288px;
        }

        div#artImage2 {
            width: 144px;
        }

    section#artImages div img {
        width: 100%;
        /* position: absolute; */
        bottom: 0;
    }

这是我的 jsfiddle http://jsfiddle.net/PsMff/ 下面是我正在寻找的插图。

【问题讨论】：

您必须为图像的父元素分配一些高度，因为position:absolute 断开它们与布局的连接，它们不再影响其父元素的高度

标签： css positioning css-position

【解决方案1】：

你是对的......divs 需要分配一些 hight，如果你想保留当前的 html 标记。

注意：你也不需要将html元素的标签名与ids（例如div#artImage1）结合使用，因为一个id只能引用标记中的一个特定元素。

你可以试试这样的东西（jsfiddle），我给了divs hight: 300px：

section {display: block}
#artImages {
    margin: 0 auto;
    width: 673px;
}
#artImages div {
    position:relative;
    float:right;
    height:300px;
}
#artImage1 {
    width: 288px;
}
#artImage2 {
    width: 144px;
}
#artImage3 {
    position:relative;
    width:100%;
    background-color:blue;
}
#artImages div img {
    position:absolute;
    width: 100%;
    bottom: 0;
}

另一种选择：

如果您不想为 div 分配高度，而是让它调整到其中较高的一个，将另一个容器包裹在上面的两个 divs 周围。在这里，我将 #floater div 添加到您的标记中：

<section id="artImages">
    <div id="floater">
        <div id="artImage2">
            <img src="http://placekitten.com/144/160" alt="" />
        </div>
        <div id="artImage1">
            <img src="http://placekitten.com/288/200" alt="" />
        </div>
    </div>
    <div id="artImage3">
        <img src="http://placekitten.com/673/300" alt="" />
    </div>
</section>

现在向右浮动#floater 并在图像上使用display:inline-block; 和#artImage1 和#artImage2 和bottom:0;。像这样的：

section {display: block}
#artImages {
    margin: 0 auto;
    width: 673px;
}
#floater, #artImage3 {
    float:right;
}
#artImage1, #artImage2 {
    display:inline-block;
    width: 288px;
}
#artImage2 { width: 144px }
#artImage3 { width: 100% }
#artImages img {
    width: 100%;
    bottom: 0;
}

jsfiddle example

【讨论】：

【解决方案2】：

使用class属性代替id，然后添加以下代码

  position : relative;
  bottom : 0px;
  clear : both;

【讨论】：