我正在学习 HTML5 和 CSS 3(新手)。当我浏览书中的示例时，我遇到了渲染问题。
我想做的是: 创建一个人造列。
工作样本:
<!doctype html>
<html>
<head>
<title>Faux Columns</title>
<style>
.container{
background: black;
color: #fff;
}
.container::after{
content: ' ';
clear: both;
display: block;
}
.col{
float: left;
width: 50%;
}
</style>
</head>
<body>
<div class="container">
<aside class="col">
Aside
</aside>
<div class="col main">
Main Content Area
</div>
</div>
</body>
</html>运行脚本，可以看到两列。
现在运行这个脚本，
<!doctype html>
<html>
<head>
<title>Faux Columns</title>
<style>
.container{
background: black;
color: #fff;
}
.col{
float: left;
width: 50%;
}
</style>
</head>
<body>
<div class="container">
<aside class="col">
Aside
</aside>
<div class="col main">
Main Content Area
</div>
</div>
</body>
</html>为什么上面没有渲染？
- 我做错了什么？
- 此外，在工作示例中，
::after是什么？ - 在工作示例 CSS 内容中:“”；为什么这样设置？
- 该工作示例 CSS 实际上做了什么？
根据一些评论，我只是更改了父容器中的颜色。
<!doctype html>
<html>
<head>
<title>Faux Columns</title>
<style>
.container{
background: black;
color: red;
}
.col{
float: left;
width: 50%;
}
</style>
</head>
<body>
<div class="container">
<aside class="col">
Aside
</aside>
<div class="col main">
Main Content Area
</div>
</div>
</body>
</html>现在我可以看到两列了。但是没有设置parent的背景色black。
最佳答案
您可以添加 <div style="clear:both;"></div>在.col.main之后元素，或添加 overflow: auto;到 .container
关于html - 页面呈现为空。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33614881/