我这里以4个div为例，html代码如下：

<body>

    <div id="column1" style="background-color: blue;float:left;width:25%">a</div>

    <div id="column2" style="background-color :cyan;float:left;width:25%">b</div>

    <div id="column3" style="background-color: yellow;float:left;width:25%">c</div>

    <div id="column4" style="background-color: red;float:left;width:25%">d</div>

</body>

这里主要是这个float:left。

效果如下：

html设置多个div并排显示的更多相关文章

  1. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  2. 让两个Div并排显示

    一.使用display的inline属性 <div style="width:300px; height:auto; float:left; display:inline"& ...

  3. 两个DIV并排显示

    今天做的一个项目,需要做3个div,一个是总框(Div1),另外两个是子框,按比例填满div1,我设置好两个div的width和height,发现效果是两个子div上下显示,如图所示: 要想将两个DI ...

  4. 在HTML中实现两个div并排显示

    在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...

  5. html中怎么样让div并排显示

    html中的div默认是流式显示,每个div会占用一整行 <html> <head> <meta http-equiv="Content-Type" ...

  6. 多个div并排显示的居中问题——来自腾讯的一道面试题

    前两天曲面了一下腾讯,被鄙视了... 自己太水了,且面试官对我可能也有点不爽,说什么还没叫我我就去了,可是尼玛写的面试时间是3点40,我特码进去的时候都3点50了,我还以为晚了呢,他妈的. 实现几个d ...

  7. 如何让两个div并排显示

    正常情况下两个div都是上下排版的,那么怎么让它们并排显示呢? 方法一:都左浮动float:left; 方法二:一个左浮动,一个右浮动 方法三:给两个div都设置display:inline属性,但两 ...

  8. html中DIv并排显示问题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  9. 两个div并排显示，当浏览器界面缩小时会出现换行

    解决:规定两个子div的父div的宽 <div id="showDataDiv" style="width: 1000px"> <div st ...

随机推荐

  1. electron中引入jquery

    <!-- Insert this line above script imports --> <script>if (typeof module === 'object') { ...

  2. x006-函数和模块的使用

    来源:百度SEO公司 函数和模块的使用 在Python中可以使用def关键字来定义函数,和变量一样每个函数也有一个响亮的名字,而且命名规则跟变量的命名规则是一致的.在函数名后面的圆括号中可以放置传递给 ...

  3. QQ龙虎榜数据接口

    1.个股全部上榜日期 strUrl.Format(L"http://stock.finance.qq.com/cgi-bin/sstock/q_lhb_js?t=1&c=%06d&q ...

  4. python - orm 字段

    1.models.AutoField 自增列 = int(11) 如果没有的话,默认会生成一个名称为 id 的列,如果要显示的自定义一个自增列,必须将给列设置为主键 primary_key=True. ...

  5. 对linux下日志文件error监控

    对日志文件中的error进行监控,当日志文件中出现error关键字时,就截取日志(grep -i error 不区分大小写进行搜索"error"关键字,但是会将包含error大小写 ...

  6. perfectpixel 加载PSD图到网页中和已经写好的网页进行对比

    perfectpixel  这是火狐的插件: 用途:加载设计图,和 已经编写好的网页进行对比,看是否完美还原. 谷歌也有类似的插件,但是无法下载.

  7. 验证账号密码是否为空 if格式

    当前台页面是否提示有没有输入账号密码时 这时需要验证 //验证账号是否为空 if(string.IsNullOrEmpty(zh)) { //为空 则提示输入账号 ObjToJsin.msg = &q ...

  8. CF455C Civilization

    嘟嘟嘟 水题一道,某谷又恶意评分. 合并无非是将两棵树的直径的中点连一块,记原来两棵树的直径为\(d_1, d_2\),那么新的树的直径就是\(max(d_1, d_2, \lceil \frac{d ...

  9. base/7/x86_64/filelists_db FAILED

      解决办法: [root@localhost ~]# cd /var/lib/rpm [root@localhost rpm]# rm -rf __db.* # 清除原 rpmdb 文件 [root ...

  10. luogu_P4767 [IOI2000]邮局

    传送门 Description 高速公路旁边有一些村庄.高速公路表示为整数轴,每个村庄的位置用单个整数坐标标识.没有两个在同样地方的村庄.两个位置之间的距离是其整数坐标差的绝对值. 邮局将建在一些,但 ...