【代码片段】两列布局

转载 2015年07月11日 00:50:19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:80%; height:600px; margin:0 auto}
.left{ width:20%; height:600px; background:#ccc; float:left}
.right{ width:80%; height:600px; background:#FCC; float:right}
</style>
</head>

<body>
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc; float:left}
.right{ width:660px; height:600px; background:#FCC; float:right}
</style>
</head>

<body>
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
</html>


相关文章推荐

【代码片段】混合布局

混合布局 //一列+两列 body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center;...

代码片段编辑工具

  • 2017年11月19日 15:13
  • 310KB
  • 下载

线性神经网络代码片段

  • 2016年06月01日 21:05
  • 2KB
  • 下载

Sublime Text 2使用:如何为它添加编译环境(如Lua编译环境)和代码片段

作为一个程序员,代码的编辑器是一个我们经常接触的东西。本人目前使用过的体验最好的编译器是Sublime Text。用它写Lua,或者其它各种文件,还是搜索文件,文本,都是非常强大的。右下角有编辑环境的...

C#模拟登陆代码片段

  • 2016年01月12日 14:32
  • 45KB
  • 下载

直接拿来用,九个超实用的PHP代码片段(二)

每位程序员和开发者都喜欢讨论他们最爱的代码片段,尤其是当PHP开发者花费数个小时为网页编码或创建应用时,他们更知道这些代码的重要性。为了节约编码时间,笔者收集了一些较为实用的代码片段,帮助开发者提高工...

实用HTML5代码片段

  • 2013年11月07日 09:50
  • 3KB
  • 下载

jQuery Mobile高手必备的十大技巧和代码片段

与任何新技术一样,常常难就难在如何开始入手。 有鉴于此,我们整理出了与jQuery Mobile库有关的我认为最便利的一些技巧、方法和代码片段。 由于本文不是旨在全面介绍使用jQu...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【代码片段】两列布局
举报原因:
原因补充:

(最多只允许输入30个字)