本文目录
- html的div排列问题
- HTML中怎么用div+table来布局，另div怎么套div和表格，请大神指导
- HTML里面有几种布局方式
- html中用div完成田字格的布局怎么弄啊
- html的div怎么使用
- html布局时候div用了绝对定位或者漂浮以后，下面的div怎么布局
- html 三个div如何排成左二右一
- 如何使用DIV标签布局
html的div排列问题
html中的div排版是通过css样式控制的。
DIV+CSS布局中主要CSS属性介绍：
Float:
Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道《div》标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。
Margin:
Margin属性用于设置两个元素之间的距离。
Padding:
Padding属性用于设置一个元素的边框与其内容的距离。
Clear:
使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。
***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》DIV+CSS布局教程《/title》
《style type="text/css"》
#Container{
width:1000px;
margin:0 auto;/*设置整个容器在浏览器中水平居中*/
background:#CF3;
}
#Header{
height:80px;
background:#093;
}
#logo{
padding-left:50px;
padding-top:20px;
padding-bottom:50px;
}
#Content{
height:600px;
/*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/
margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/
background:#0FF;
}
#Content-Left{
height:400px;
width:200px;
margin:20px;/*设置元素跟其他元素的距离为20像素*/
float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
background:#90C;
}
#Content-Main{
height:400px;
width:720px;
margin:20px;/*设置元素跟其他元素的距离为20像素*/
float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
background:#90C;
}
/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/
#Footer{
height:40px;
background:#90C;
margin-top:20px;
}
.Clear{
clear:both;
}
《/style》
《/head》
《body》
《div id="Container"》
《div id="Header"》
《div id="logo"》这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。《/div》
《/div》
《div id="Content"》
《div id="Content-Left"》Content-Left《/div》
《div id="Content-Main"》Content-Main《/div》
《/div》
《div class="Clear"》《!--如何你上面用到float,下面布局开始前最好清除一下。--》《/div》
《div id="Footer"》Footer《/div》
《/div》
《/body》
《/html》
运行效果：
HTML中怎么用div+table来布局，另div怎么套div和表格，请大神指导
1；DIV和表格布局局限性很多，但是用到表格的时候还是必须要用。
2；现在用的最多的是DIV+CSS来布局，发展的需要，更加灵活多变，代码更整洁清晰。
3；DIV嵌套DIV《div》。
《div class=""》 《div class=""》《/div》《/div》
4；DIV嵌套表格。
《div class=""》 《table》 《tr》 《td》 《/td》 《/tr》 《/table》《/div》
5；根据自己的需要选择何时的搭配这才是最重要的。
6；自己没事的时候可以多练习一下。
HTML里面有几种布局方式
1.自然布局。
没有任何修饰的布局是自动靠左的。
2.流动布局
上面讲的float:left的情况。
3.定位布局
相对定位和绝对定位都是相对于父div标签的。
相对------以这个元素的本来应该在的位置为参照点
绝对——以父div标签的原点（左上角）为参照点。
由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。
还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。
当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。
html中用div完成田字格的布局怎么弄啊
《html》《head》《style type="text/css"》 .zone{float:left;width: 45%;margin:3px;height:200px;border: solid 1px;}.z1 {background-color:#00ffCB;}.z2{background-color:#ffffCB;} 《/style》《/head》《body》《div》《div class="zone z1"》《/div》《div class="zone z2"》《/div》《/div》《div》《div class="zone z2"》《/div》《div class="zone z1"》《/div》《/div》《/body》《/html》
结果如下：
html的div怎么使用
div现在一般网页的布局都是使用的div+css来布局，div的话，就是通过。《div》《div》《p》《/p》《/div》《/div》div的嵌套使用来完成整个网页的布局，你可以将div理解成一个一个的块，然后在div块中写入P等等标签，然后再通过CSS来修饰就行了，如高度，宽度，背景。《div style="background:#f90; text-align:center;"》test《/div》《div style="background:#f60"》《span》usemen:《/span》《input type="text" style="border:1px solid #ccc; width:200px; height:20px;" 》《/div》《div style="background:#f60"》《span》usemen:《/span》《input type="text" style="border:1px solid #ccc; width:200px; height:20px;" 》《/div》
html布局时候div用了绝对定位或者漂浮以后，下面的div怎么布局
实现两个DIV盒子并排，一行只显示两列DIV布局，使用width宽度+float浮动即可实现一行显示两列DIV布局。
解决方法:一个设置为float:left，一个设置为float:right。
1、完整HTML源代码：
2、两列并排DIV实例截图:
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》
如何使用DIV标签布局
首先div是html里的一个标签。写法为：
，成对出现的哦。然后你可以给它很多属性例如宽（width）高（height）背景图片，背景色布局就要看你的需要了，
中间可以装很多东西，布局就是给这些个东西归类，这个div方这些，那个div放那些，然后就很多div了。接着把分类的东西放在需要的位置上布局就完成了。怎么放？就是浮动和定位了。两个重要属性：float和position。
默认div的宽是100%占一整行的，但是float就可以使连个div同行
