Question

我正在试图找出如何在另一个div中的div中定位div。这甚至可能吗？我已经看过一些关于在另一个div中定位div的文章，但没有一个对我有意义。我对CSS有些新意，我仍然试图掌握这个概念。

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

HTML code：

<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如何在屏幕上进行翻译。

Answer 2

对于Css的初学者，我建议你首先阅读Css基础知识，最好的方法是首先引用O'Reilly的Css和Html书。

现在谈论标签和它的嵌套你可以嵌套你想要的多少div，只要你定位它们，对齐它们，浮动它们是一种正确的方法。与div标签相关的许多属性都可以帮到你。

下一步是开发和查看设计使用Firefox的Firebug功能来跟踪高度和widht属性以及许多很酷的东西，所以如果你使用firefox，请为设计师安装FIREBUG一个很酷的工具，给你一个设计优势。

首先介绍基础知识。

希望这可能会有所帮助。

在另一个Div内的一个Div内的CSS Div

2 个答案: