HTML - 如何在html中将浮动div标签浮在p标签和h5标签之上

因此，就是这样。我正在使用HTML ..我已经试图做绝对和相对的事情..但不知何故它不适合我..或者我做错了，但无论如何这里是问题..HTML - 如何在html中将浮动div标签浮在p标签和h5标签之上

灰色背景是body标签
白框带有红色边境是一个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>

来源

2017-10-29 Uraforclain

为什么不能简单地把它'的content'以上？ –

，可以使用绝对这个职位，但 “的azazaz” 的家长需要有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>

来源

2017-10-29 07:40:27 karl

雅正是我所做的......但它似乎并没有在我的代码上工作任何想法y虽然：/ – Uraforclain

如果它在上面的代码段中工作，但不在您的代码中，很难说明原因。确保你不会意外地覆盖CSS中其他位置的'position'值。如果您不确定，请检查Chrome中的元素以查看实际使用的CSS值。 – karl

解决！哈哈你的权利.. jeez！感谢卡尔; D – Uraforclain

为什么就不能做到这一点：

使内容上面的div，然后用margin-left:auto作出正确alignement。

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

来源

2017-10-29 07:55:54

实际上我正在寻找的是卡尔在下面做了什么。谢谢temani :) – Uraforclain

这个答案不是“不正确” - 它实际上是更好的解决方案。 – UncaughtTypeError

如果他问如何用CSS做些什么，最好的答案就是不要通过改变HTML结构来实现。 – karl

HTML - 如何在html中将浮动div标签浮在p标签和h5标签之上

回答

相关问题