在一个容器内部，要放在两个并排的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. SQLMAP大全

    转自:http://blog.csdn.net/zsf1235/article/details/50974194 本人小白,初次认识sqlmap,很多都是转载资料,只是学习研究一下! 练习的网站可以用 ...

  2. vs2015 安装之后安装MSSM 2016 导致 vs启动报错 System.ArgumentException 已添加了具有相同键的项，ActivityLog.xml

    如题,先是装了vs2015,开发什么的都没有问题,后来安装了SqlServer2016 MSSM,出大问题了,vs2015打开就报错,具体错误如上,还想还有个ActivityLog.xml 这个文件的 ...

  3. 新项目，WebTest

    最近为了给Jumony for ASP.NET进行单元测试有点伤神,ASP.NET因为环境特殊,一直是单元测试的禁地,传统的单元测试工具由于运行在非ASP.NET环境,可谓是举步维艰.当然,微软在搞A ...

  4. linux源代码安装程序

    下载源代码之后 tar zxvf file.tar.gz      解压源代码压缩包 ./configure --prefix=/opt/haha/  安装到这个路径 make  编译 sudo ma ...

  5. Spring MVC 处理静态资源不能访问问题

    在web.xml文件中加入如下代码: <servlet-mapping> <servlet-name>default</servlet-name> <url- ...

  6. epub电子书--目录结构介绍

    epub电子书简介 epub全称为Electronic Publication的缩写,意为:电子出版, epub于2007年9月成为国际数位出版论坛(IDPF)的正式标准,以取代旧的开放Open eB ...

  7. Opencv 完美配置攻略(Win8.1 + Opencv 2.4.8 + VS 2013)

  8. Android Studio使用

    HelloWorld在虚拟机上正常运行,在红米1S上很抱歉,HelloWorld已停止运行.有时间解决. 在windows下感觉到Android Studio非常慢,急死人.

  9. WPF DataGrid绑定到数据源的方法

    string conStr = System.Configuration.ConfigurationManager.ConnectionStrings["str"].Connect ...

  10. 【Unity3D】AR应用中，关于东南西北方位的判断。

    这篇文章的应用场景是这样子的: 首先我们要做的是一个带有LBS定位服务(比如高德地图.百度地图等)AR功能,在这个场景中,会有一些地图上的”点“(如派出所.学校)是我们需要显示在我们的AR镜头上的,如 ...