今天做的一个项目，需要做3个div，一个是总框（Div1），另外两个是子框，按比例填满div1，我设置好两个div的width和height，发现效果是两个子div上下显示，如图所示：

要想将两个DIV并排显示，需要用到float属性，将div2的float设置为left，将div3的float设置为right，运行就达到了想要的效果

值得一提的是，如果div2和div3的width值相加等于DIV1的width值得话，div2和div3依旧是上下排布而非并列排布

代码示例如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

  <head></head>

  <body>

  <div id="1" style="width:600px;height:300px;border:1px solid #000;">

      <div id="2" style="float:left;width:500px;height:300px;border:1px solid #000;">div2</div>

    <div id="3" style="float:right;width:94px;height:300px;border:1px solid #000;">div3</div>

  </div>

  </body>

</html>

2017.6.7日更新：

现在为了使div框在自由拉伸的过程中中间没有缝隙，设置div的时候使用百分比设置，我试了很久始终得不到想要的效果，要么是上文提到的上下排列，要么就是中间的缝隙更大了，我把border删除之后完美的解决了问题

两个DIV并排显示的更多相关文章

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

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

  2. 让两个Div并排显示

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

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

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

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

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

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

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

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

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

  7. div+css:两个div并排等高 (table-cell)

    两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. css两个form不换行，两个div并排代码

    1.form不换行通过table布局实现 <table> <tr> <td> <form method="get" action=&quo ...

  9. NO.14 两个div并排，左边为绝对宽度，右边为相对宽度

    两个div并排,左边为绝对宽度,右边为相对宽度,这个问题,我也经常遇到,我一般的处理方法是将最大的容器padding-left固定宽度,左边的固定宽度的一块position:absolute,然后ri ...

随机推荐

  1. GUI常用对象介绍3

    %text hf = axes; ht = text(,,'示例'); get(ht); %公式 并且设置位置坐标 (积分符号) text('String','\int_0^x dF(x)','Pos ...

  2. bind的封装

    1.bind.call.apply三者的区别: 1)bind的返回值是一个函数体,不会被立即调用 2)call.apply会立即调用,第一个参数都是用来改变this的指向,两者的区别是前者传递参数的时 ...

  3. Linux sed 命令字符串替换使用方法详解

    1. sed替换的基本语法 sed 's/原字符串/替换字符串/' 单引号里面,s表示替换,三根斜线中间是替换的样式,特殊字符需要使用反斜线”\”进行转义.2. 单引号” ‘ ’”是没有办法用反斜线” ...

  4. 在idea中不出现大波浪的设置

    在idea中如果有重复代码时候,就会出现大波浪 ,然后,现在可以设置  Duplicated Code 的对号去掉就可以没有大波浪

  5. deepin安装Python3.6和pip

    1.安装python3.6 sudo apt-get install python3.6 2.修改软连接 sudo ln -s /usr/local/bin/python3.6 /usr/bin/py ...

  6. innobackup stream 压缩备份，解压后的qp文件

    是用innobackup stream 压缩备份,解压后很多文件还是qp格式的压缩文件,需要再解压. 备份: [root@ ~]# /usr/bin/innobackupex --defaults-f ...

  7. bzoj2152 / P2634 [国家集训队]聪聪可可（点分治）

    P2634 [国家集训队]聪聪可可 淀粉质点分治板子 边权直接 mod 3 直接点分治统计出所有的符合条件的点对再和总方案数约分 至于约分.....gcd搞搞就好辣 #include<iostr ...

  8. 06：vuejs项目实战

    1.1 项目说明 1.技术架构 vue.js, 模块化,工程化, 移动端 2.目录部署 Css:所有样式文件 Data:所有异步接口 Img:所有图片文件 Js:所有js文件(2.0) index.h ...

  9. AnswerOpenCV(0826-0901)一周佳作欣赏

    1.OpenCV to detect how missing tooth in equipment Hello everyone. I am just starting with OpenCV and ...

  10. java利用poi生成excel文件后下载本地

    1.该功能需要poi的jar包,链接: http://pan.baidu.com/s/1migAtNq 密码: 38fx. 2.首先新建一个实体类,用以存放单个数据 public class Test ...