html页面中表单怎么用div分列布局

html-css018

html页面中表单怎么用div分列布局,第1张

html页面中表单怎么用div分列布局主要分两个步骤操作：

第一种情况，float浮动相同

让两个div盒子的float值相同，比如都设置float:left或float:right，宽度设置合适即可。这里我们通过案例实现一行两列DIV布局。

1、完整实例DIV+CSS代码：

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html charset=utf-8" /> 

<title>两个DIV并排</title> 

<style> 

.div-a{ float:leftwidth:49%border:1px solid #F00} 

.div-b{ float:leftwidth:49%border:1px solid #000} 

</style> 

</head> 

<body> 

<div class="div-a">第一个DIV盒子</div> 

<div class="div-b">第二个DIV盒子</div> 

</body> 

</html>

2、实例截图

一行两列DIV并排效果截图

需要注意是宽度，要想一行两列DIV布局，避免第三个DIV也并排，这里就要设置计算好宽度（这里设置百分比宽度为49%），三个DIV盒子宽度之和大于父级宽度，两个DIV宽度之和小于父级宽度，即可实现只有2个DIV并排。

第二种情况，float浮动值不同

一个设置为float:left一个设置为float:right.。

1、完整HTML源代码：

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html charset=utf-8" /> 

<title>两个DIV并排</title> 

<style> 

.div-c{ float:leftwidth:49%border:1px solid #F00} 

.div-d{ float:rightwidth:49%border:1px solid #000} 

</style> 

</head> 

<body> 

<div class="div-c">第三个DIV盒子</div> 

<div class="div-d">第四个DIV盒子</div> 

</body> 

</html>

2、两列并排DIV实例截图

如果你一定要用table去实现，就是大量的table标签嵌套table，然后不断的嵌套，针对每个单元格、标签进行控制

然后提一句，从2007年开始，整个前端开发（HTML5开发）、网页制作的制作规范，行业当中就是使用HTML+CSS的模式进行（也称为DIV+CSS），其原因在于table的语义性、可维护性都比较差，从语义的角度来说，table是表格，也就是呈现数据的数据表，并非网页布局的东西。

对于很多学校、大学的官网，由于是2005年左右的一系列产品，所以，会采用table的布局方式。如果你是在制作学校的某一个网页，在维护学校，那你没的选择，只能按我第一段说的那么去操作，虽然麻烦~如果你是在自学HTML和CSS，在拿学校的页面做练习，那么一定以“行业规范”为准，选择好的合适的书籍辅助学习。