html - 使用 HTML 和 CSS 的响应式分屏

标签 html css twitter-bootstrap

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 7 年前

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

最佳答案

在我看来,最好的方法是,假设您的意思是一个包含两列的页面应该有两个像这样的 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 - 使用 HTML 和 CSS 的响应式分屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35817248/

上一篇:html - 在 HTML 中控制表格单元格的边框

下一篇:Html 段落样式 : making it like this

相关文章:

javascript - 用户离开页面时如何发送ajax请求

javascript - 创建一个简单的 PDF 模式

jquery - 使用输入类型 ="checkbox"填充表格单元格

javascript - 来自 png 的具有上/下/下状态的 HTML 按钮

jquery - 检测应用最大宽度的图像

html - 无法在页面上水平拉伸(stretch)页脚

php - 使用 PHP include 时改变 CSS sprite 导航栏的状态

html - 如何在一种形式的文本输入上没有样式,但为另一种形式的输入设置样式?

html - 如何使 Bootstrap 导航栏居中?

jquery - 通过 JS 获取当前事件标签。