你好,欢迎浏览牛城网站官网,有什么需要帮助请联系在线客服人员!

24小时在线QQ客服:852440645  

全国服务热线

0311-89870036

首页 > 建站知识 > JS特效

建站知识

主营业务

新闻动态

兼容性完美的两栏式布局样式案例

发布人:后台管理员   发布时间:2015-11-18 15:51:59

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
 
 <head>
  <title>   </title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 
<style type="text/css">
.container{
margin:0 auto;
}
.right{
float:right;
border:1px solid red;
}
.left{
border:1px solid green;
}
</style>
 
 </head>
 
 <body  
>
 
 <div class="container" style="width:960px;">
  <div class="right" style="width:200px;"> 
 <script type="text/javascript">
 
 document.write(navigator.userAgent);
 
 
 </script>
 
</div>
  <div class="left"  style="margin-right:204px;"> 
 
 <script type="text/javascript">
 
 document.write(navigator.userAgent);
 
 
 </script>
 <pre>
.container{
 
 
margin:0 auto;
 
 
}
.right{
float:right;
 
border:1px solid red;
 
}
.left{
margin-right:204px;
border:1px solid green;
 
}
</pre>
<hr/>
 <div class="container" >
 <div class='right'  style="width:300px;" >xx</div>
 
<div  class='left'  style="margin-right:304px;" >oo</div>
</div>
</div>
 
 </div>
<div  >
 
</div>
 
 </body>
</html>