Question

我是网页设计的新手。什么是HTML和CSS来创建简单的分屏布局？

Answer 1

在我看来，最好的方法，假设你的意思是一个有两列的页面，就会有两个这样的div：

<html>
<head>
<style>
#header {width: 100%; height: 100px; background-color: red;}
#col-1 {width: 50%; float: left; height: 400px; background-color: green;}
#col-2 {width: 50%; float: right; height: 400px; background-color: blue;}
/* Height can be changed but width cannot */
</style>
</head>
<body>
<div id="header"><h1>This is a header</h1></div>
<div id="col-1"><h1>This is half of a page</h1></div>
<div id="col-2"><h1>This is another half of a page</h1></div>
</body>
</html>

这是一个代码笔： http://codepen.io/anon/pen/zqvyYp?editors=1000

*由于这使用宽度百分比，这将是响应

使用HTML和CSS响应分屏

1 个答案: