我是编码新手，所以这是一个简单的类(class)页面(下面的完整代码包括 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>
最佳答案
我不完全确定你的问题是什么，但我认为你最大的问题是你没有在 .purplebox 中的 position 之前加上分号元素的 CSS。
您的原始 CSS:
.purplebox {
background-color:#8904B1;
width:200px;
height:200px /*No semicolon*/
position:relative;
left:100px;
}
修复了 CSS，它似乎在 Stackoverflow 代码片段编辑器中对我有用。
.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>关于html - div 不会向左移动或响应定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27645305/