在一个容器内部，要放在两个并排的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. iPhone添加邮箱

    阿里云邮箱设置 手机自带的电子邮件客户端该如何添加阿里云邮账号呢?这里以iPhone4s和安卓系统为例,分别进行添加阿里云邮箱帐号的添加.   官网是这么介绍的:   一.如下以iPhone4s为例, ...

  2. BZOJ 1227 【SDOI2009】 虔诚的墓主人

    Description 小W 是一片新造公墓的管理人.公墓可以看成一块 \(N×M\) 的矩形,矩形的每个格点,要么种着一棵常青树,要么是一块还没有归属的墓地.当地的居民都是非常虔诚的基督徒,他们愿意 ...

  3. Netron开发快速上手（二）：Netron序列化

    Netron是一个C#开源图形库,可以帮助开发人员开发出类似Visio的作图软件.本文继前文”Netron开发快速上手(一)“讨论如何利用Netron里的序列化功能快速保存自己开发的图形对象. 一个用 ...

  4. TCP/IP、Http、Socket、XMPP-从入门到深入

    TCP/IP.Http.Socket.XMPP-从入门到深入 终极iOS程序猿 2016-12-29 18:27 为了便于大家理解和记忆,我们先对这几个概念进行的介绍,然后分析他们的不同,再进行详细的 ...

  5. 用于制作app store的截图的工具：Brief Wrapper —— 最便捷的应用商店屏幕快照

    https://itunes.apple.com/cn/app/brief-wrapper-zui-bian-jie/id991730319?l=en&mt=8 可以快捷的做出类似于下面的这种 ...

  6. RCW 生存期控制

    RCW是.net 对com的包装,比如office就是通过RCW来被.net调用的.可以百度:office pia 了解更多信息. RCW 是一个.net类. 1.关闭线程对rcw的自动清理 Syst ...

  7. 用机器名访问和用Localhost访问时在IE中的区别（备忘）

    meta中未指定文档模式的时候, localhost访问文档模式默认是Edge 机器名访问时文档模式默认是IE7 <head>中添加 <meta http-equiv="X ...

  8. 如何实时查看linux下的日志

    Linux日志文件在/var/log目录下,可以通过命令查看日志文件. 1,cat messages可以查看某个日志文件. 2,要达到实时更新,可以通过tail命令查看更新的数据,例如tail -f ...

  9. 从基层容器类看万变不离其宗的JAVA继承体系

    以容器类为例子,可以观一叶而知秋,看看以前的前辈们是如何处理各种面向对象思想下的继承体系的.读的源代码越多,就越要总结这个继承关系否则读的多也忘得快. 首先摆上一张图片: 看到这张图很多人就慌了,难道 ...

  10. PHP -- Perl风格正则表达式

    1.正则表达式作为一个匹配的模版,是由原子(普通字符,例如a-z),有特殊功能的字符(元字符,例如*.+ 和?等),以及模式修正符三个部分组成.2.在于Perl兼容的正则表达式函数中使用模式时一定要给 ...