一个 Div 中的 CSS Div 在另一个 Div 中

Question

我想弄清楚如何将一个 div 放置在另一个 div 中的一个 div 中。这可能吗？我看过一些关于将一个 div 定位在另一个 div 中的文章，但没有一篇对我有意义。我对 CSS 有点陌生，我仍在努力掌握这个概念。

基本上，我正在尝试使用定位的 div 来创建类似表格的自定义效果。我的主 div 以页面为中心，宽 1000 像素，高 1200 像素。然后我在那个里面有另外两个 div，将它分成左右两列，每列 500 像素宽和 1200 像素高。我很容易得到那部分。我现在正尝试在右栏中使用另一个 div 将我的文本向下推。在顶部我有一张 300 像素高和 500 像素宽的图片。我希望文字位于图片下方。

HTML代码:

<div id="mbody" style="position:relative;">    

    <div id="lbody" style="position:absolute;">  

        Some Text

    </div>

    <div id="rbody" style="position:absolute; right:0;">  

        <img src="photo.jpg" height="300" width="500">

        <div style="position:absolute; width:500; height:1200; top:350;">

            Some Text

        </div>

    </div>

</div>

CSS 代码:

#mbody{
    margin: 0px;
    margin-left:auto;
    margin-right:auto;
    top:-73px;
    border: 2px solid green;
    width: 1000px;
    height:1200px;
    background: black;
    z-index:1;
}
#lbody{
    margin: 0px;
    padding:0px;
    left:0px;
    border:2px solid red;
    width:500px;
    height:1200px;
    background:black;
}
#rbody{
    margin: 0px;
    padding:0px;
    border:2px solid blue;
    width:500px;
    height:1200px;
    background:black;
}

请记住，我是 CSS 的新手，仍在学习中。如果有人回答，请您以即使像我这样的初学者也能理解的方式回答。提前致谢。

Answer 1

您需要在您的 css 中的所有 div id 名称之前添加“#” 例如。 #mbody、#lbody 等

只有这样html才会知道你在给div赋值

此外，要在右栏的文本上方显示图像，可以通过以下方式实现 <img src="photo.jpg" height="300" width="500" style="float:right;">

此外，通常在设计阶段在 css 中提供背景颜色会有所帮助 例如。 #lbody {background:red;} 这将帮助您了解 css 在屏幕上的转换方式。