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>

Html   两个DIV并排的问题

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并排的问题

上一篇:Memcached帮助类


下一篇:Vue.js-----轻量高效的MVVM框架(一、初识Vue.js)