Html 两个DIV并排的问题
在一个容器内部，要放在两个并排的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并排的问题的更多相关文章
- div+css:两个div并排等高 (table-cell)
两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- css两个form不换行，两个div并排代码
1.form不换行通过table布局实现 <table> <tr> <td> <form method="get" action=&quo ...
- NO.14 两个div并排，左边为绝对宽度，右边为相对宽度
两个div并排,左边为绝对宽度,右边为相对宽度,这个问题,我也经常遇到,我一般的处理方法是将最大的容器padding-left固定宽度,左边的固定宽度的一块position:absolute,然后ri ...
- 让两个Div并排显示
一.使用display的inline属性 <div style="width:300px; height:auto; float:left; display:inline"& ...
- 两个DIV并排显示
今天做的一个项目,需要做3个div,一个是总框(Div1),另外两个是子框,按比例填满div1,我设置好两个div的width和height,发现效果是两个子div上下显示,如图所示: 要想将两个DI ...
- 在HTML中实现两个div并排显示
在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...
- 如何让两个div并排显示
正常情况下两个div都是上下排版的,那么怎么让它们并排显示呢? 方法一:都左浮动float:left; 方法二:一个左浮动,一个右浮动 方法三:给两个div都设置display:inline属性,但两 ...
- 两个div并排显示，当浏览器界面缩小时会出现换行
解决:规定两个子div的父div的宽 <div id="showDataDiv" style="width: 1000px"> <div st ...
- css实现两个div并排等高（一个div高度随另一个高度变化而变化）
方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box;
随机推荐
- 基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- LeetCode:Max Points on a Line
题目链接 Given n points on a 2D plane, find the maximum number of points that lie on the same straight l ...
- ionic路由传值
ionic路由传值 app.js ===================================== //新建工作任务.state(‘app.newTask’, angularAMD.rout ...
- docfx组件介绍--YamlSerialization
在docfx中把元数据以yaml的形式保存,在metadata阶段会序列化数据到yaml文件中,在build阶段又需要从yaml文件反序列化出来.在使用过程中,意外发现yamldotnet在处理大量强 ...
- 如何通过ShadowSocket自动更新Chrome
经常收到Chrome的更新提示,并下载更新程序后,报无法连接网络,然后更新不能了, 经过一段时间的搜索,找到了一条比较好的方法,分享一下: 1. 本机打开ShadowSocket 2. 打开Privo ...
- Jquery揭秘系列：谈谈bind,one,live,delegate事件及实现
在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate等等. 我们先看看他们的定义,直接进入主题: bind( )方法用于将一个处理程 ...
- 基本排序算法的Python实现
本篇主要实现九(八)大排序算法,分别是冒泡排序,插入排序,选择排序,希尔排序,归并排序,快速排序,堆排序,计数排序.希望大家回顾知识的时候也能从我的这篇文章得到帮助. 为了防止误导读者,本文所有概念性 ...
- Android基础总结（二）
常见布局 相对布局 RelativeLayout 组件默认左对齐.顶部对齐 设置组件在指定组件的右边 android:layout_toRightOf="@id/tv1" 设置在指 ...
- Flyme适配源码更新命令,轻松完成打包
第一次已经同步了所有源码(花了很长时间),第一次已经连接手机进行了插桩和解reject,那么第二次还需要这么麻烦吗?答案是:NO ! 1.官方源码,执行如下命令可以实现: repo sync -c 2 ...
- BZOJ 2882: 工艺
2882: 工艺 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 599 Solved: 268[Submit][Status][Discuss] D ...