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

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

第一种情况，float浮动相同

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

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

<!DOCTYPE html>

<html>

<head>

<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>

<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实例截图

如果是一个在左一个在右的话你可以把文本框放在这里面<div style="float:left"></div>另外一个用right

如果只是简单的隔开的话可以用

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，填充问题基础代码。

2、在index.html中的第一个<form>标签中，添加样式代码：style="float:left"。

3、浏览器运行index.html页面，此时两个表单显示在了同一行，没有换行。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7247969.html

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

发表评论

评论列表（0条）