Question

我是编码的新手，所以这是一个简单的课程页面（下面的完整代码包括html和内联css）。

问题在于我没有回应定位 - 而且它不响应“float：left;”在使用定位代码之前。我在firefox，chrome和几个在线代码测试站点（例如codepen，squarefree）中加载了该页面。谢谢你的帮助。

<!doctype html>
<html>
<head>
    <title>Learning CSS</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

   <style type="text/css">

        .large {
            font-size:200%;
        }

        #green {
            color:green;
        }

        .underline {
            text-decoration:underline;
        }

        .bold {
            font-weight:bold;
        }

        .purplebox {
            background-color:#8904B1; 
            width:200px;
            height:200px
            position:relative;
            left:100px; 
        }

        .greenbox {
            background-color:#01DF01;
            width:300px;
            height:100px;
        }


    </style>    

</head>

<body>

    <div class="purplebox">

        <p class="large">This is some text.</p>

    </div>

    <div class="greenbox">

        <p id="green" class="large">This is some more text.</p>

    </div>

    <div class="clear"></div>

    <p>The third <span class="underline large bold">word</span> in this paragraph is underlined.</p>

</body>
</html>

Answer 1

我不完全确定你的问题是什么，但我认为你最大的问题是你没有在你的position元素的CSS .purplebox之前加上分号。

您的原始CSS：

.purplebox {
            background-color:#8904B1; 
            width:200px;
            height:200px /*No semicolon*/
            position:relative;
            left:100px; 
        }

修复了CSS，它似乎在Stackoverflow Snippet编辑器中适用于我。

.purplebox {
      background-color: #8904B1;
      width: 200px;
      height: 200px; /* Semicolon */
      position: relative;
      left: 100px;
    }

.large {
  font-size: 200%;
}
#green {
  color: green;
}
.underline {
  text-decoration: underline;
}
.bold {
  font-weight: bold;
}
.purplebox {
  background-color: #8904B1;
  width: 200px;
  height: 200px;
  position: relative;
  left: 100px;
}
.greenbox {
  background-color: #01DF01;
  width: 300px;
  height: 100px;
}

<div class="purplebox">

  <p class="large">This is some text.</p>

</div>

<div class="greenbox">

  <p id="green" class="large">This is some more text.</p>

</div>

<div class="clear"></div>

<p>The third <span class="underline large bold">word</span> in this paragraph is underlined.</p>

div不会向左移动或响应定位

1 个答案: