本文目录
- div布局从左到右 不用CSS代码怎么写
- 在HTML开发中如何利用DIV实现这样的布局
- html div 上左右布局 右侧布满
- 如何实现上左右在个DIV满屏布局
- html 三个div如何排成左二右一
- 如何用html,css,div实现网页布局
- 怎么在JSP中用
实现，左右布局
- 关于DIV左右布局的问题
div布局从左到右 不用CSS代码怎么写
div本身是盒子类型标签，就是块级标签，不给css样式的话，它的宽就是父级的宽，高是根据子级内容来定的，所以你若是想把td变成div，不用css是不行的，要给div设置宽，然后设置浮动float:left;，这样才行
在HTML开发中如何利用DIV实现这样的布局
田字格布局，要求大小相同的四个正方形。而html里div如果不加控制的话是独占一行的，现在要做的是把四个大小相同的方块，排列成“田”字。
第一步、新建html文档并搭建框架
新建一个TXT文档，重命名为“田子格布局.html”，然后用记事本打开，输入表头信息，已经html整体框架搭建。包括head与body。
第二步、DIV布局
分别复制4个不同的div作为4部分，并且分别命名为不同id；显示内容为块1、块2、块3、块4。
【提示】div在html里是单独占一列的（如果不控制），现在4个div布局完成。
【代码如下】
《/head》
《body》
《div id=“prat1“》块1《/div》
《div id=“prat2“》块2《/div》
《div id=“prat3“》块3《/div》
《div id=“prat4“》块4《/div》
《/body》
《/html》
第三步、CSS控制4个DIV显示
输入style然后开始对4个div进行控制，分别对四个块进行大小和颜色的设定，处理之后在浏览器中打开显示如下图所示。
【提示】由于是田子格，所以四个div大小应该相同，为了可以区分颜色分别采用不同的颜色。
【代码如下】
《style》
#prat1{
width: 200px;
height: 200px;
background: blue;/*边长200像素的蓝色方块*/
}
#prat2{
width: 200px;
height: 200px;
background: red;/*边长200像素的蓝色方块*/
}
#prat3{
width: 200px;
height: 200px;
background: yellow;/*边长200像素的蓝色方块*/
}
#prat4{
width: 200px;
height: 200px;
background: green;/*边长200像素的蓝色方块*/
}
《/style》
第四步、使用浮动
在CSS里控制输入float：left；四个div全部输入一样内容，这时候看到的是四个并排的div，而没有达到想要的效果，如下图所示。
【代码如下】
《style》
#prat1{
width: 200px;
height: 200px;
background: blue;
float: left;
}
#prat2{
width: 200px;
height: 200px;
background: red;
float: left;
}
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
}
#prat4{
width: 200px;
height: 200px;
background: green;
float: left;
}
《/style》
第五步、清除浮动
在第三块上使用清除浮动clear：left；其余的代码保持不变，然后保存代码，刷新打开的页面，就会看到一个田字格了，如下图所示。
【代码如下】
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
clear: left;
【注意】只清除第三块的就可以了。
【完整的代码】
《!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN“ “http://www.w3.org/TR/html4/loose.dtd“》
《html》
《head》
《meta http-equiv=“Content-Type“ content=“text/html;charset=UTF-8“》
《title》田字格布局《/title》
《style》
#prat1{
width: 200px;
height: 200px;
background: blue;
float: left;
}
#prat2{
width: 200px;
height: 200px;
background: red;
float: left;
}
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
clear: left;
}
#prat4{
width: 200px;
height: 200px;
background: green;
float: left;
}
《/style》
《/head》
《body》
《div id=“prat1“》块1《/div》
《div id=“prat2“》块2《/div》
《div id=“prat3“》块3《/div》
《div id=“prat4“》块4《/div》
《/body》
《/html》
html div 上左右布局 右侧布满
刚才看错了 你这颜色选得，我辨色能力没那么强。左右布局的div两个加一起的宽度不能大于父容器的宽度，要不然会出现换行的现象的。
#div_aside {
float: left;
width: 20%;
height: 100%;
background-color: aliceblue;
}
#div_general_report {
float:left;
width:80%;
height:100%;
background-color: aqua;
}
这样就行了
如何实现上左右在个DIV满屏布局
《!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 type=“text/css“》
* {margin:0; padding:0;}
#logo { width:100%; height:90px; background:#F00;}
#container { position:relative; margin-top:15px; width:100%;}
#menu { position:absolute; top:0; left:0; width:200px; height:460px; background:#00F;}
#content { margin-left:215px; background:#FF0; height:460px;}
《/style》
《/head》
《body》
《div id=“logo“》《/div》
《div id=“container“》
《div id=“menu“》《/div》
《div id=“content“》《/div》
《/div》
《/body》
《/html》
要实现height:100%不太可能，我们通常说一屏的高度是多少
像笔记本电脑，一屏是550px，
台式机一屏是580px
html 三个div如何排成左二右一
1、浮动布局：
《style》
html,body{margin:0; padding:0}
.div1 {float:left; width:80%; height:600px; background-color:red}
.div2 {float:left; width:80%; background-color:green}
.div3 {float:right; width:20%; background-color:blue}
《/style》
《div class=“div1“》宽80%，高600px《/div》
《div class=“div3“》宽20%，高随内容《/div》
《div class=“div2“》宽80%，高随内容《/div》
《br style=“clear:both“/》
2、绝对定位：
《style》
html,body{margin:0; padding:0}
.div1 {position:absolute; left:0; top:0; width:80%; height:600px; background-color:red}
.div2 {position:absolute; left:0; top:600px; width:80%; background-color:green}
.div3 {position:absolute; right:0; top:0; width:20%; background-color:blue}
《/style》
《div class=“div1“》宽80%，高600px《/div》
《div class=“div2“》宽80%，高随内容《/div》
《div class=“div3“》宽20%，高随内容《/div》
3、flex布局：
《style》
html,body{margin:0; padding:0}
.box {display:flex; align-items:flex-start}
.left {display:flex; flex-direction:column; flex:0 1 80%}
.div1 {flex:0 1 600px; background-color:red}
.div2 {flex:auto; background-color:green}
.right {flex:auto; background-color:blue}
《/style》
《div class=“box“》
《div class=“left“》
《div class=“div1“》宽80%，高600px《/div》
《div class=“div2“》宽80%，高随内容《/div》
《/div》
《div class=“right“》宽20%，高随内容《/div》
《/div》
如何用html,css,div实现网页布局
拿去用
《!DOCTYPE html》
《html》
《head》
《meta charset=“utf-8“》
《title》div《/title》
《/head》
《body》
《div id=“container“ style=“width:500px“》
《div id=“header“ style=“background-color:#FFA500;“》
《h1 style=“margin-bottom:0;“》主要的网页标题《/h1》《/div》
《div id=“content“ style=“background-color:#EEEEEE;height:200px;width:400px;float:left;“》
内容在这里《/div》
《div style=“height:100px;width:100px;float: right;“》
《div id=“menu“ style=“background-color:#456900;height:100px;width:100px;position: relative;“》
侧边《/div》
《div id=“footer“ style=“background-color:#FFA500;height:100px;width:100px; position: relative;“》
版权 《/div》
《/div》
《/div》
《/body》
怎么在JSP中用实现，左右布局
div将页面分栏显示，具体代码如下所示：
《html》
《body》
《div style=“width:340px;background-color:#333;margin:0 auto;“》
《div style=“width:30%;height:30px;background-color:#F00;float:left;“》左《/div》
《div style=“width:20%;height:30px;background-color:#F0F;float:right;“》右《/div》
《div style=“clear:both;“》《/div》
《/div》
《/body》
《/html》
关于DIV左右布局的问题
《!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“》
《!--
#main {
float: left;
height: auto;
width: auto;
border: 1px solid #FF0000;
}
#left {
float: left;
height: 400px;
width: 600px;
border: 1px solid #00FF00;
}
#right {
float: right;
height: 400px;
width: 300px;
border: 1px solid #0000FF;
}
.left_div {
border: 1px solid #999999;
}
--》
《/style》
《/head》
《body》
《div id=“main“》
《div id=“left“》
《div id=“left_1“ class=“left_div“》sdfdsdfgdfgfsdf《/div》
《div id=“left_2“ class=“left_div“》sdfdsfdfgdfgsdf《/div》
《div id=“left_3“ class=“left_div“》sdfdsfdfgdfgsdf《/div》
《/div》
《div id=“right“》sdfdsfsdf《/div》
《/div》
《/body》
《/html》
