html表格自动分列,html页面中表单怎么用div分列布局

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

第一种情况，float浮动相同

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

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

html>

两个DIV并排

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

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

第一个DIV盒子

第二个DIV盒子

2、实例截图

一行两列DIV并排效果截图

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

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

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

1、完整HTML源代码：

html>

两个DIV并排

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

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

第三个DIV盒子

第四个DIV盒子

2、两列并排DIV实例截图

html表格自动分列,html页面中表单怎么用div分列布局相关推荐

【JavaWeb】jsp页面中表单重复提交的三种情况
情况一如通过regist.jsp页面提交用户名和密码申请注册,若注册成功,则将用户数据保存到数据库,并通过请求转发跳转到success.jsp页面. 此时在跳转后按F5刷新当前页面,则数据库会多次添 ...
html表单中的数据提交后清空,怎么实现小程序中表单提交后自动清空内容
怎么实现小程序中表单提交后自动清空内容发布时间:2021-03-09 10:50:51 来源:亿速云阅读:88 作者:小新小编给大家分享一下怎么实现小程序中表单提交后自动清空内容,相信大部分人都 ...
Html 中表单提交的一些知识总结——防止表单自动提交，以及submit和button提交表单的区别...
转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...
记表格设计规范整理与页面可视化生成工具开发
前言公司有一个项目在维护,大概有300左右,其中表单与表格的页面占比大概百分之五六十,为了节省开发时间,避免多人协作时,出现多套冗余代码,我们尝试写了一下表单和表格的生成工具,从梳理到规范学习再到总 ...
验证必须是数字php,Element 中表单非必填数据项必须为数字的验证问题
Element-ui 的el-form组建中,自带基本的验证功能,比如某些项必填的验证,直接加入rules 规则中即可,如下实例: 在页面中书写如下: 在vue 初始化data中 filterForm ...
理工科Word论文排版（章节自动标号、公式自动标号、图片自动标号、表格自动标号、标号交叉引用、公式参数介绍等），持续更新
最近在完成论文的写作,无论是硕博士的大论文还是日常发布的小论文,精美的排版都会让评阅人心情舒畅,一个良好的word模板也会让论文写作变得简单容易. 正所谓工欲善其事必先利其器,拿出半天的时间去制作一个 ...
在html文档中建立两个表单,职称计算机考试Dreamwaver中表单的创建与应用
职称计算机考试Dreamwaver中表单的创建与应用表单在网页中主要负责数据采集功能.下面小编给大家讲述的是职称计算机考试Dreamwaver中表单的创建与应用,大家可以参考阅读,更多详情请关注应届 ...
layui 横向表单_对layui中表单元素的使用详解
首先不管是单选框还是复选框或者是下拉框,都要在你写的标签外面套一层div或者是form标签,如: 这样写好了以后,你如果是写在静态页面,这样式可以看见效果,如果写在js里,这样写了还有一步得写,那就是 ...
微信公众号php提交表单,PHP教程：使用YII2框架实现微信公众号中表单提交功能...
<PHP教程:使用YII2框架实现微信公众号中表单提交功能>要点: 本文介绍了PHP教程:使用YII2框架实现微信公众号中表单提交功能,希望对您有用.如果有疑问,可以联系我们. 相关主题: ...

html表格自动分列,html页面中表单怎么用div分列布局

html表格自动分列,html页面中表单怎么用div分列布局相关推荐

最新文章

热门文章