在一个容器内部，要放在两个并排的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. MySql操作

    用C#写了个系统更新的小程序,用到MySql MySQL 5.1参考手册 1.使用MySqlConnection 需要引用dll: MySql.Data.rar 连接数据库 string conStr ...

  2. flask+sqlite3+echarts3 系统监控

    总的而言,分三部分: 1.监控器(monitor.py): 每秒获取系统的四个cpu的使用率,存入数据库. 2.路由器(app.py): 响应页面的ajax,获取最新的一条或多条数据. 3.页面(in ...

  3. mybatis的配置

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  4. python 列表 总结

    在python里创建列表和字典非常简单,这里总结一下它们的常用方法 1.创建列表 myArry = ["one", "two", "three&quo ...

  5. IDEA 分享项目到 Git@OSC/GitHub

    前提:新开项目,需要在 Git@OSC 建立版本库管理. 1.当然是先在Git@OSC上创建仓库,拿到Git@OSC仓库的HTTP连接 https://git.oschina.net/*****/** ...

  6. 如何重复使用IEnumerable对象来枚举？

    我在2011年9月发表了一个问问,http://q.cnblogs.com/q/28679/. 没人理我. 自己看了一下,尝试自己解决: 原问题: MSDN: 在非泛型集合中,您可以在调用 Reset ...

  7. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

  8. vue 配置文件详解

    var path = require('path'); // NodeJS中的Path对象,用于处理目录的对象,提高开发效率. // 模块导入 module.exports = { // 入口文件地址 ...

  9. asp.net mvc HandleErrorAttribute 异常错误处理 无效！

    系统未知bug,代码没有深究. 现象:filters.Add(new HandleErrorAttribute()); 使用了全局的异常处理过滤. HandleErrorAttribute 核心代码: ...

  10. JS：offsetWidth\offsetleft 等图文解释

        网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.of ...