-1

我试图弄清楚如何在另一个 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 新手，仍在学习。如果有人回答，请以即使像我这样的初学者也能理解的方式回答。提前致谢。

4

2 回答 2

2

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

只有这样 html 才会知道您正在为 div 赋值

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

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

于 2012-09-29T12:00:53.030 回答
1

对于 Css 的初学者，我建议您先了解 Css 基础知识，最好的入门方法是先参考 O'Reilly 的 Css 和 Html 书籍。

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

接下来是开发和查看设计使用 Firefox 的 Firebug 功能来跟踪高度和宽度属性以及许多很酷的东西，所以如果您使用 Firefox，请安装 FIREBUG 一个很酷的设计师工具，让您在设计中获得优势。

首先通过基础知识。

希望这可能会有所帮助。

于 2012-09-29T11:52:49.633 回答