Question

根据我的理解，您可以在其父级内部使用绝对定位将其准确放置在您想要的位置。如下所述：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/以下是我正在寻找的内容的说明。

illustration of div's and images

Answer 1

您是正确的... div需要分配一些hight，如果您想保留当前的HTML标记。

注意：您也不需要将html元素的标记名称与id组合使用（例如div#artImage1），作为一个{{1}只能引用标记中的一个特定元素。

你可以尝试这样的事情（jsfiddle），我给了id s div：

hight: 300px

另一种选择：

如果你不想为div分配高度，而是让它调整到较高的一个，围绕上面的两个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 #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;

jsfiddle example

Answer 2

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

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

试图让img的位置完全位于父div的底部

2 个答案:

另一种选择：