简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

上下左右布局（DIV+CSS）_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 12:27:33
原创
1430 人浏览过

<!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=gb2312" /><title> </title><style type="text/css">#head{height:40px;background-color:#0033CC;margin:0;}#content{background:#CCCCCC;height:200px;margin:0;}#left{width:20%;height:200px;background:#CCCC66;float:left;margin:0;}#c{width:60%;height:200px;background:red;margin:0;float:left;}#right{width:20%;height:200px;background:#339966;float:right;margin:0;}#foot{background:#0099CC;height:40px;margin:0;}</style></head><body><div id="head">head</div><div id="content">  <div id="left">left</div>  <div id="c">content</div>  <div id="right">rigth</div></div><div id="foot">foot</div></body></html>
登录后复制

　　

相关标签：
上下左右布局（DIV+CSS）
来源：php.cn
上一篇：css layout ?人的?梯 下一篇：div css 盒子模型_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
是否可以通过 MediaQueries 更改在较小分辨率下显示的布局而不更改默认布局？ 我在默认分辨率上使用“网格模板列”布局，使元素按预期显示，但在较小的分辨率上，它们由容器优先级渲染，创建我想要更改的视觉效果。在默认分辨率下：在显示屏左侧呈现，然后在显示屏的另一端...
来自于 2023-09-16 14:17:29
0
1
521
幻灯片箭头的点击区域宽度超过图标 在我的WordPress开发网站上，我有一个用于图库的幻灯片功能。当你点击一张图片时，它会开始播放幻灯片。我的问题是我的两个白色箭头，一个在左边，一个在右边。箭头的可点击区域比图标...
来自于 2023-09-13 19:29:50
0
1
282
Bootstrap 登陆页面布局问题 - 容器无法正确适应屏幕尺寸 我目前正在使用Bootstrap创建登陆页面进行练习。但是，我面临布局问题，容器不适合适当的屏幕尺寸。左右两侧不平衡，导致屏幕向左侧倾斜。这是说明问题的屏幕截图（链接）：文本我尝试...
来自于 2023-09-10 21:04:02
0
2
280
将图像从左向右移动，然后再次从左向右移动 我正在为一些图像编写CSS，基本上我想要实现的是，有一个图像应该从左侧移向右侧，当它到达右端时它应该再次出现左侧等等，我能够使用以下代码来实现这一点。@keyframesslide...
来自于 2023-09-07 15:10:40
0
1
208
CSS 网格：当子内容溢出列宽时创建新行 我有一个基于CSS网格的两列布局。当第二列的内容超过1fr我想创建一个新行。按照目前的情况，内容只是溢出了该列。此布局的一个要求是右侧菜单列中的项目位于一行中。我通过以下方式实现这...
来自于 2023-09-05 15:18:28
0
1
240
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！