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 
.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 に答える
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 に答える
0

両方のdivの正確な座標があれば、それは本当に簡単です。

あなたの例では、単に入れてください

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

またはそのような何かとそれはトリックを行います。

于 2012-06-26T19:09:19.470 に答える
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 に答える