最近在做网页设计的大作业，遇到很多有意思的问题，在这里记录一下。
比如我要实现一行中有详细信息和更多信息，想让他们分别居左居右显示。以下是方法：
方法1：用CSS设置left和right类并设置浮动float
<!DOCTYPE html>
<html>
<head>
<title>
span中居左居右
</title>
<style>
.left{
float:left; width:50%px;
}
.right{
float:right;
}
</style>
</head>
<body>
<div>
<span class="left">使用span布局居左</span>
<span class="right">使用span布局居右</span>
</div>
</body>
</html>
方法2：采用bootstrap框架中的.pull-left class类和.pull-right class 类
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap框架实现</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<span class="pull-left">使用span布局居左</span>
<span class="pull-right">使用span布局居右</span>
</div>
</body>
</html>