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;
随机推荐
- 1264: [AHOI2006]基因匹配Match
1264: [AHOI2006]基因匹配Match Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 982 Solved: 635[Submit][S ...
- 验证LeetCode Surrounded Regions 包围区域的DFS方法
在LeetCode中的Surrounded Regions 包围区域这道题中,我们发现用DFS方法中的最后一个条件必须是j > 1,如下面的红色字体所示,如果写成j > 0的话无法通过OJ ...
- Python学习之day3
1.字典操作 for key in dic: #循环一个字典 print key,dic.get(key) for k ,v in dic.items(): print k,v 2.集合 # -*- ...
- 【51Nod 1501】【算法马拉松 19D】石头剪刀布威力加强版
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1501 dp求出环状不连续的前缀和,剩下东西都可以算出来,比较繁琐. 时间 ...
- MapReduce实现手机上网日志分析（排序）
一.背景 1.1 流程 实现排序,分组拍上一篇通过Partitioner实现了. 实现接口,自动产生接口方法,写属性,产生getter和setter,序列化和反序列化属性,写比较方法,重写toStri ...
- JQuery 实现标题与内容相呼应样式
效果图如下:鼠标移到标题上,标题下面显示标题对应的内容.实现的方法如下: 1.引入css和js文件 <link href="public/CSS/StyleSheet.css" ...
- linux配置java开发环境
一.下载jdk java -version 查看有没有安装jdk 下载对应版本的jdk:jdk-java7u60-linux-x64.tar.gz 二.解压 cp jdk-java7u60-lin ...
- <<< struts 的一系列介绍
struts有什么用? 以前使用servlet开发应用系统的人深深感受到在java代码中嵌入大量html代码是一件非常痛苦的事,于是sun推出了JSP,解决了java代码中嵌入html代码的问题.但是 ...
- CSS复习
CSS 选择器 p.into 表示带有into类的p元素 伪类: a) first-line b) last-line 伪元素: :before 能在指定的元素前添加内容(创造 ...
- 网站访问量大 怎样优化mysql数据库
MySQL优化的一些建议,单机MySQL的优化我分为三个部分,一是服务器物理硬件的优化,二是 MySQL安装时的编译优化,三是自身配置文件my.cnf的优化:如果单机的优化也解决不了你的数据库的压力的 ...