在一个容器内部，要放在两个并排的DIV，两个方法：

1.使用浮动。这个方式div是脱离文档流的，在窗口布局复杂，大小变化的时候，可能会有一些不希望的情况发生。

 <!DOCTYPE HTML>

 <html>

     <head>

         <title>Learn to use workerman to chat!</title>

         <meta charset="utf-8">

         <style>

             .container{

                 width:100%;

                 height:100%;

             }

            .left{

                    text-align:center;

                    background-color: blue;

                 float:left;

                 width: 50%;

            }

            .right{

                    text-align:center;

                    background-color: red;

                 float:right;

                 width:50%;

            }

         </style>

     </head>

     <body>

         <div class="container">

             <div class="left">

                 This is left div.

             </div>

             <div class="right">

                 This is right div.

             </div>

         </div>

     </body>

 </html>

2.利用margin值为负值的效果。

 <!DOCTYPE HTML>

 <html>

     <head>

         <title>Learn to use workerman to chat!</title>

         <meta charset="utf-8">

         <style>

             .container{

                 width:100%;

                 height:100%;

             }

            .left{

                    text-align:center;

                    background-color: blue;

                 display:inline-block;

                 width: 50%;

            }

            .right{

                    text-align:center;

                    background-color: red;

                 display:inline-block;

                 margin-left:-5px;

                 width:50%;

            }

         </style>

     </head>

     <body>

         <div class="container">

             <div class="left">

                 This is left div.

             </div>

             <div class="right">

                 This is right div.

             </div>

         </div>

     </body>

 </html>

Html 两个DIV并排的问题的更多相关文章

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

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

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

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

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

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

  4. 让两个Div并排显示

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

  5. 两个DIV并排显示

    今天做的一个项目,需要做3个div,一个是总框(Div1),另外两个是子框,按比例填满div1,我设置好两个div的width和height,发现效果是两个子div上下显示,如图所示: 要想将两个DI ...

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

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

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

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

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

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

  9. css实现两个div并排等高（一个div高度随另一个高度变化而变化）

    方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box;

随机推荐

  1. TCP connect的错误返回值

    如果是TCP套接字,调用connect函数将激发TCP三次握手过程,而且仅在连接建立成功或出错时返回,其中错误返回可能有下面几种情况: (1)若TCP客户没有收到SYN分节的响应,则返回ETIMEDO ...

  2. 让游戏以高性能GPU（独立显卡）运行

    在EXE中导出全局变量: N卡: extern "C" { __declspec(dllexport) DWORD NvOptimusEnablement = 0x00000001 ...

  3. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  4. RGW/SWIFT对象存储性能测试工具--COSBench安装

    Cosbench是Intel的开源云存储性能测试软件,COSBench目前已经广泛使用与云存储测试,并作为云存储的基准测试工具使用 https://github.com/intel-cloud/cos ...

  5. django model Meta选项

    可用的 Meta 选项 abstract Options.abstract 如果 abstract = True ,这个 model 就是一个 抽象基类 . app_label Options.app ...

  6. 配置windows 系统PHP系统环境变量

    1． 首先到php官网下载php-5.3.6-nts-Win32-VC9-x86.ZIP 解压到电脑硬盘.将文件解压到文件夹php5.3.6下载地址:http://www.php.net/downlo ...

  7. BZOJ 1968: [Ahoi2005]COMMON 约数研究

    1968: [Ahoi2005]COMMON 约数研究 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 2032  Solved: 1537[Submit] ...

  8. Zabbix监控mysql主从复制状态

    原理 mysql slave show slave status\G 在输出信息中查看I/O线程和SQL线程的状态值(YES为正常,NO为错误) Slave_IO_Running: Yes Slave ...

  9. 【转】C# lock的使用

    一.Lock定义     lock 关键字可以用来确保代码块完成运行,而不会被其他线程中断.它可以把一段代码定义为互斥段(critical section),互斥段在一个时刻内只允许一个线程进入执行, ...

  10. <<< eclipse软件部署修改项目的访问地址

    在eclipse开发javaweb项目的时候,访问项目时需要在浏览器地址输入:localhost:8080/项目名  但是大多数部署到服务器的时候访问的是根目录,就是不加localhost:8080后 ...