1

据我了解，您可以在其父级内部使用绝对定位将其准确放置在您想要的任何位置。就像这里解释的那样：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/下面是我正在寻找的说明。

div 和图像的插图

4

2 回答 2

1

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

注意：您也不需要将 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#artImage2bottom: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 示例

于 2013-05-04T13:17:06.430 回答
0

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

  position : relative;
  bottom : 0px;
  clear : both;
于 2013-04-20T19:51:25.490 回答