首页 文章

HTML - 如何在p标签上方浮动div标签，在html中浮动h5标签

提问于
浏览 次
0

所以这就是事情 . 我正在使用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>

enter image description here

html css

2 回答

  • 0

    您可以使用绝对位置，但"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>
    回复于
  • 0

    为什么不简单地这样做：

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

    /*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;
}

    <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>
    回复于

相关问题