我这里以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. ARRAY_MAP函数用法

    ARRAY_MAP函数用法 Posted on 2012-9-18, 22:15, by tmser, under php 总结 . 看php JSON 类中有这样一种用法array_map(arra ...

  2. 智能灯控（基于ZigBee）

    时间:2017年12月 阶段:大二上学期 背景:单片机原理与应用课设 名称:智能灯控 摘要 本系统实现了多方式控灯功能,有按键控灯.串口指令控灯.点对点无线射频控灯.AI模式控灯.其中AI模式控灯是通 ...

  3. java 设计模式 --委派模式

    委派模式(Delegate)原理: 类B和类A是两个互相没有任何关系的类,但是B具有和A一模一样的方法和属性:并且调用B中的方法/属性就是调用A中同名的方法和属性. B好像就是一个受A授权委托的中介, ...

  4. HashMap，HashTable，ConcurrentHashMap的实现原理及区别

    http://youzhixueyuan.com/concurrenthashmap.html 一.哈希表 哈希表就是一种以 键-值(key-indexed) 存储数据的结构,我们只要输入待查找的值即 ...

  5. leetcode解题报告（17）：Missing Number

    描述 Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is mis ...

  6. Ansible管理上千台主机时需要的速度优化

    1 开启ssh长连接 OpenSSH 5.6版本后SSH支持了Multiplexing 设置参数 ssh_args = -C -o ControlMaster=auto -o ControlPersi ...

  7. 原生table表格的使用

    近期公司让我修改一些之前的table标签写的页面,感觉对table相关的标签不是太熟悉,于是专门整理一下: 1.如果给td标签设置百分比宽度,比如有10列内容,我们却设置了每个单元格是30%的宽度,会 ...

  8. Java+Bigdata学习路线

    Java+Bigdata学习路线 2019-05-28 07:04:33 @Auther:MrZhangxd STAGE 第一阶段:JAVA基础 |-第一阶段:JAVA基础 | |-可掌握的核心能力 ...

  9. awk如何传递外部变量？

    第一种: [root@master yjt]# var=1 [root@master yjt]# echo |awk -v value=$var '{print value}' 1 第二种: [roo ...

  10. rpm包和deb分别是什么？

    一.RMP 是 LINUX 下的一种软件的可执行程序,你只要安装它就可以了.这种软件安装包通常是一个RPM包(Redhat Linux Packet Manager,就是Redhat的包管理器),后缀 ...