HTML - 如何在html

Question

所以这就是事情。我正在使用HTML ..我已经尝试做绝对和相对的事情..但不知何故它对我不起作用..或者我做错了但是反正这里是问题..

• 灰色背景是正文标记

• 带有红色边框的白框是一个div容器 浮

• 绿色寄宿生持有h5标签

• 蓝色寄宿生持有p标签

如果您运行以下代码段，则可以看到黑框是我的“图片”所在的位置。我只需要将黑匣子放在白色方框内右侧所有其他标签上方，红色边框。如果你看不到我正在谈论的黑匣子，请向下滚动以查看该片段的整个输出。

/*Location*/
#Location {
  width: 37.5%;
  height: 300px;
  background-color: white;
  float: left;
  margin-left: 24%;
  margin-top: 5px;
  border-radius: 3px;
  border: 2px solid red;
}

#Location>p {
  padding-left: 10px;
  font-size: 14px;
  border: 2px solid blue;
}

#Location>h5 {
  padding-left: 10px;
  color: cornflowerblue;
  border: 2px solid green;
}

#MapID {
  height: 15%;
  width: 15%;
  border: 2px solid black;
}

<div id="Location">
  <h5>Some text Header</h5>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <div id="MapID"></div>
</div>

Answer 1

您可以使用绝对位置，但“MapID”的父级需要position: relative才能生效。

在您的示例中，我只将position: relative添加到#Location，然后您可以按预期使用position: absolute。

/*Location*/
#Location {
  position: relative;
  width: 37.5%;
  height: 300px;
  background-color: white;
  float: left;
  margin-left: 24%;
  margin-top: 5px;
  border-radius: 3px;
  border: 2px solid red;
}

#Location>p {
  padding-left: 10px;
  font-size: 14px;
  border: 2px solid blue;
}

#Location>h5 {
  padding-left: 10px;
  color: cornflowerblue;
  border: 2px solid green;
}

#MapID {
  position: absolute;
  top: 0;
  right: 0;
  height: 15%;
  width: 15%;
  border: 2px solid black;
}

<div id="Location">
  <h5>Some text Header</h5>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <div id="MapID"></div>
</div>

Answer 2

为什么不简单地这样做：

在内容之上设置div，然后使用margin-left:auto使其成为正确的对象。

＆＃13;

＆＃13;

/*Location*/
#Location {
  width: 37.5%;
  height: 300px;
  background-color: white;
  float: left;
  margin-left: 24%;
  margin-top: 5px;
  border-radius: 3px;
  border: 2px solid red;
}

#Location>p {
  padding-left: 10px;
  font-size: 14px;
  border: 2px solid blue;
}

#Location>h5 {
  padding-left: 10px;
  color: cornflowerblue;
  border: 2px solid green;
}

#MapID {
  height: 15%;
  width: 15%;
  border: 2px solid black;
  margin-left: auto;
}

＆＃13;

<div id="Location">
  <div id="MapID"></div>
  <h5>Some text Header</h5>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>
  <p>Some text: </p>

</div>

＆＃13;

＆＃13;

＆＃13;