在一个容器内部，要放在两个并排的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. C#调用LUA函数

    using UnityEngine; using System.Collections; using LuaInterface; public class testLUACALL : MonoBeha ...

  2. rpc框架之HA/负载均衡构架设计

    thrift.avro.grpc之类的rpc框架默认都没有提供负载均衡的实现,生产环境中如果server只有一台,显然不靠谱,于是有了下面的设计,这其实是前一阵跟北京一个朋友在qq群里交流的结果,分享 ...

  3. VirtualBox装ghost XP

    在win7 professional 64上安装了virtualBox4.3.14 r95030 版本,之所以要安装这个vb,是因为刚升级的vm 打开之后很占用cpu, 网上又说vb不是很占用cpu而 ...

  4. C#软件设计——小话设计模式原则之：依赖倒置原则DIP

    前言:很久之前就想动笔总结下关于软件设计的一些原则,或者说是设计模式的一些原则,奈何被各种bootstrap组件所吸引,一直抽不开身.群里面有朋友问博主是否改行做前端了,呵呵,其实博主是想做“全战”, ...

  5. MVC模式在UI里的应用

    In a similar way to other parts of a game, user interfaces usually go through several iterations unt ...

  6. Asp.Net MVC<七>：Model

    Model 指ViewModel ,其作用: 用于目标Action的参数绑定 用于View呈现 Model元数据则是对ViewModel数据类型的描述,其作用在于控制作为Model的数据对象在View ...

  7. 在渲染前获取 View 的宽高

    在渲染前获取 View 的宽高 这是一个比较有意义的问题,或者说有难度的问题,问题的背景为:有时候我们需要在view渲染前去获取其宽高,典型的情形是,我们想在onCreate.onStart.onRe ...

  8. 更新/替换系统 hosts，轻松访问国外站点

    更新 hosts 下面介绍的操作均可能覆盖现有 hosts ,进行操作前请先确认是否需要备份. 推荐使用本项目的 Host Tools 来自动化 备份/配置 工作. 若更新 hosts 未立即生效,请 ...

  9. Linux--装好之后要做的几件事（转）

    1.删除libreoffice libreoffice虽然是开源的,但是Java写出来的office执行效率实在不敢恭维,装完系统后果断删掉 sudo apt-get remove libreoffi ...

  10. python word

    代码: #coding=utf-8 __author__ = 'zhm' from win32com import client as wc import os import time import ...