我这里以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. appium 使用name 定位报错 Locator Strategy 'name' is not supported for this session

    RF中使用 name定位 报错提示: Locator Strategy 'name' is not supported for this session 解决: 1. 打开本地文件 driver.js ...

  2. Jfinal undertow本地运行加载静态文件

    undertow部署文档中可配置静态资源也可以添加磁盘目录作为项目中得静态文件访问 undertow.resourcePath = src/main/webapp, D:/static 这样配置就可以 ...

  3. 网络编程---scoket使用，七层协议，三次挥手建连接，四次挥手断连接

    目录 == 网络编程 == 软件开发架构 网络编程 互联网协议 TCP协议的工作原理 Socket == 网络编程 == 软件开发架构 开发软件 必须要开发一套 客户端与服务端 客户端与服务端的作用 ...

  4. 17.组件页面应用和vue项目生成

    基本示例 这里有一个 Vue 组件的示例: // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function ...

  5. 普通的java Ftp客户端的文件上传

    关于ftp上传文件其实并不难,但有时候面对现实的环境还是很蛋疼的,今天我就分享一下,普通的上传文件文件至FTP的方式,它满足大部分FTP,但也有特别的,下篇博客会提及到. 下面我用一个FtpUtil, ...

  6. Elasticsearch 使用：创建、插入、查询、更新、删除

    Elasticsearch 是一个开源的搜索引擎,建立在一个全文搜索引擎库 Apache Lucene™ 基础之上. Lucene 可能是目前存在的,不论开源还是私有的,拥有最先进,高性能和全功能搜索 ...

  7. [WEB安全]Weblogic漏洞总结

    0x01 Weblogic简介 1.1 叙述 Weblogic是美国Oracle公司出品的一个应用服务器(application server),确切的说是一个基于Java EE架构的中间件,是用于开 ...

  8. HttpClient学习（四）—— 关于Http

    一.Http状态码 状态码分类 100 ~ 199 信息提示 200 ~ 299 成功 300 ~ 399 重定向 400 ~ 499 客户端错误 500 ~ 599 服务端错误 常见状态码 200 ...

  9. CSS中的cursor属性

    css中的cursor这个属性是用来设置光标形状的. 这个属性定义了鼠标指针放在一个元素边界范围内时所用的光标的形状. 默认值:auto 继承性:yes 出现版本:css2 JavaScript语法: ...

  10. RabbitMQ and batch processing 批提交

    RabbitMQ - RabbitMQ and batch processinghttp://rabbitmq.1065348.n5.nabble.com/RabbitMQ-and-batch-pro ...