Question

我希望将div元素合并到我的页面中。

div将包含文本和背景图像，我希望每一个都在一个新行上，每个从左到右的替换

即

Text box                  

                          Textbox

Text box

这是HTML代码

<html>
    <head>
        <!-- This is a comment tag -->
        <meta charset="UTF-8" />
        <title>Lecture 4</title>
        <link rel="stylesheet" href="ok.css" type="text/css" media="screen,projection" />
        <link href='https://fonts.googleapis.com/css?family=Black+Ops+One|Open+Sans:600' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="container">
            <header>
                <img src="logo.jpg" alt="company logo" />
                <h1>Mega Computers</h1>

                <a href="http://www.twitter.com"><img src="twitter.png" alt="Twitter Link" style="width:50px;height:50px;border:0;"></a> <a href="http://www.twitter.com"><img src="facebook.png" alt="Twitter Link" style="width:50px;height:50px;border:0;"></a> <a href="http://www.twitter.com"><img src="flickr.png" alt="Twitter Link" style="width:100px;height:50px;border:0;"></a> 
                    </header>
            <div id="main_body">
            <h1></h1>
            <div id="absolute">
            <h1>ok</h1>
            </div>
            <div id ="absolute2">
            <h1>ok</h1>
            </div>
            <footer>
                <ul>
                    <li>&copy; BB Industries Ltd 2015</li>
                </ul>
            </footer>
        </div>
    </body>
</html>

^{这是一个包含以下代码的pastebin：http://pastebin.com/pQN9vPfF}

然而我似乎忽略了我在CSS中指定的大部分内容，忽略了背景颜色和位置，并且没有边框。相关的CSS如下所示

div.absolute {
  position: relative;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  background-color: white;
  border: 3px solid #73AD21;
}

大多数都被忽略，文本位于左侧而不是右侧，并且未显示该框的所有功能。它有效地为我提供了一个带有一些文本的透明区域，这不是我想要的。

Answer 1

问题是您在css中使用<div id="absolute">处理div.absolute。但是，.表示法用于类名，而不是ids。

解决方案：

将div上的id更改为类
或将css中的div.absolute更改为div#absolute或#absolute。

顺便说一下，“绝对”并不是相对定位的div最棒的名字......

div未正确显示

1 个答案: