1

我想知道如何放置一个 div 框（我想在其中放置图像），以便它出现在中心底部的另一个 div 的顶部。

在此处输入图像描述

我正在尝试以下代码：

<html>
<body>
<style type="text/css">
.outer {
    width: 350px;
    height: 350px;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>
<div class="outer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque, neque ut ultrices posuere, velit arcu aliquam dui, id rutrum justo leo nec purus. Donec aliquet justo a est iaculis id porta nulla pulvinar. Proin quis turpis vitae augue volutpat volutpat. Donec volutpat accumsan urna, id vulputate augue euismod eu. In vitae libero tortor. Integer lacinia, turpis vel egestas ornare, nisi libero tempus orci, non imperdiet erat nulla malesuada lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
   <div class="inner"></div>
</div>
</body>
</html>
4

5 回答 5

4

内部 div 上的绝对定位和自动边距的组合将起作用。您还需要为外部 div 设置相对位置

.outer {
  width: 350px;
  height: 350px;
  position: relative;
  border: 1px solid black;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; /* both left AND right must be set to 0 */
  margin: 0 auto;
}​

jsFiddle 演示

于 2012-06-26T19:16:09.047 回答
1

尝试这样的事情：jsfiddle

它将帮助您根据需要放置 div。

.outer {
    width: 350px;
    height: 350px;
    position: relative;
    background-color: yellow;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
}

为清楚起见，我在外部 div 中添加了背景。

于 2012-06-26T19:17:07.897 回答
1 
.outer {
    width: 350px;
    height: 350px;
    position:relative;
    border: 1px #bbb solid;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
    position:absolute;
    left: 130px;
    bottom:0;
}

演示

于 2012-06-26T19:13:30.647 回答
0 
#outer {
    width: 350px;
    height: 350px;
    position: relative;
    z-index: 1;
}

#inner {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    bottom: 0px;
    left: 110px;
    z-index: 2;
}
于 2012-06-26T19:32:45.353 回答
0

如果你有两个 div 的确切坐标，这真的很容易。

在你的例子中，简单地说

position: relative;
top: 250px;
left: 125px;

或类似的东西，它会做的伎俩。

于 2012-06-26T19:09:19.470 回答