今天做的一个项目，需要做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. bzoj2656 [Zjoi2012]数列(sequence)

    题目链接 好久没写高精度了,调了很久QAQ 如果直接递归计算答案的话肯定会T 发现一个数不管是分成一奇一偶还是直接>>1,都会重复计算很多东西 我们只需要在递归的时候实时维护一个xx(an ...

  2. [转载]Javascript:history.go()和history.back()的用法和区别

    Javascript:history.go()和history.back()的用法和区别 简单的说就是:go(-1): 返回上一页,原页面表单中的内容会丢失:back(): 返回上一页,原页表表单中的 ...

  3. 使用GoldenGate初始化的两种方式

    在使用OGG开始增量数据的实时复制之前,一般需要对当前的存量数据进行初始化,如果是同构数据库,则可以使用数据库自带的工具完成,比如Oracle DB中的rman, expdp/impdp等. 其实og ...

  4. 怎样从外网访问内网WebLogic？

    本地安装了一个WebLogic,只能在局域网内访问,怎样从外网也能访问到本地的WebLogic呢?本文将介绍具体的实现步骤. 准备工作 安装并启动WebLogic 默认安装的WebLogic端口是70 ...

  5. gcahce事物不够，借助binlog追上

    gcahce事物不够,借助binlog追上 宕机节点以单机集群启动,既自己作为一个集群启动,不过UUID要和旧的集群保持一致: 修复grastate.dat 文件的方式这里略,直接通过wsrep_re ...

  6. Linux学习笔记之Linux环境变量总结

    0x00 概述 Linux是一个多用户多任务的操作系统,可以在Linux中为不同的用户设置不同的运行环境,具体做法是设置不同用户的环境变量. 0x01 Linux环境变量分类 按照生命周期来分,Lin ...

  7. Oracle 手动建库

    Oracle在创建实例的时候,多数采用的是dbca的形式..其实手动建库可以提供更大的自由发挥的空间,根据情况进行定制 登录Oracle用户 指定SID(Instance Identifier) ex ...

  8. css基本知识、选择器

    CSS 是指层叠样式表 (Cascading Style Sheets),基本语法规则如下 CSS 由两个主要的部分构成:选择器,以及一条或多条声明 声明以大括号{ }括起来,一个申明包括属性和值,属 ...

  9. Tomcat 7服务器线程模型

    Tomcat 7服务器网络处理主要由NioEndpoint,其处理客户端连接的主要流程如图所示图中Acceptor及Worker分别是以线程池形式存在,Poller是一个单线程.注意,与BIO的实现一 ...

  10. centOS 7 gitlab安装

    https://www.cnblogs.com/chenfool/p/7689438.html 配置阿里巴巴 yum 源 wget -O /etc/yum.repos.d/CentOS-Base.re ...