我这里以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. django安装过程简介（Mac版）

    Django 中的项目和应用是什么? 简单来说,可以认为

  2. hadoop各版本下载地址

    http://mirror.bit.edu.cn/apache/hadoop/common/

  3. spark的广播变量

    直接上代码:包含了,map,filter,persist,mapPartitions等函数 String master = "spark://192.168.2.279:7077" ...

  4. Oracle数据库限定特定用户 特定IP 登录

    不允许test用户在 192.168.1.3 机器上访问数据库. 两种写法. 1 CREATE OR REPLACE TRIGGER DOPR AFTER LOGON ON test.schema B ...

  5. NodeJS基础知识

    console.log方法: console.log("This is a test string"); node app.js 使用重定向标准输出流: node app.js 1 ...

  6. NodeJS后台

    NodeJS后台 后台: 1.PHP 2.Java 3.Python 优势 1.性能 2.跟前台JS配合方便 3.NodeJS便于前端学习 https://nodejs.org/en/ 1.切换盘符 ...

  7. CPU占用高系统反应慢之问题定位

    今天在看到公司群里有关于测试反应测试服务器比较卡,调用调用超时,响应很慢,成功率低的问题,然后想着去处理这个问题. 本着开发的精神,摒弃网管的水平,寻找问题的根源. 主要从如下几个方面入手: 1:查询 ...

  8. C++标准库分析总结(一)

    之前学习过标准库,最近身边有人问到相关话题,故在此做一个总结 1 标准库介绍 C++标准库:C++ Standard Library C++标准模板库:Standard Template Librar ...

  9. （转载）:ganglia之环境搭建部署

    转载:http://www.360doc.com/content/19/0211/12/62122823_814215724.shtml 借鉴:https://blog.csdn.net/lswnew ...

  10. win10下交换CapLock和Esc按键

    win10下使用vim编辑时,需频繁用Esc键,可是Esc键在键盘左上角,位置遥远,操作不便.可以CapsLock键处在黄金位置,但是几乎无用,看过键盘发展历史,其实是是在发展过程中的意外而已,将两键 ...