对于小业务，需要自适应的相应式布局，如果引用bootstrap一样的框架，将会非常笨重，于是手写一个
css
/*自写栅格 start*/
body {
font-family: Helvetica,Arial,"Helvetica Neue","Droid Sans","Heiti SC","Microsoft YaHei",sans-serif;
margin:0;
}
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 10px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
/*自写栅格 end*/
/*less 变量 start*/
@normal_font_size: 20px;
@title_color: #6495ED;
/*less 变量 end*/
/*常用文字位置 start*/
.text_center {
text-align: center;
}
.text_right {
text-align: right;
}
.text_left {
text-align: left;
}
/*常用文字位置 end*/
/*常用margin start*/
.margin_top {
margin-top: @normal_font_size;
}
/*常用margin end*/
.title {
font-size: @normal_font_size;
box-shadow: 0 0 3px #000;
}
.title_left {
background-color: @title_color;
color: white;
}
.title_right {
color: @title_color;
}
.airport_en {
font-size: @normal_font_size;
}
.time {
font-size: @normal_font_size;
}
.img_center{
width: 100%;
}
.ticket_detail{
box-shadow: 0 0 3px #000;
}html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet/less" type="text/css" href="./css/carhelper.less">
<script src="./js/less.min.js" type="text/javascript"></script>
<title>机票详情</title>
</head>
<body>
<div class="row title">
<div class="col-3 title_left">
<div class="col-12 text_center">计划</div>
</div>
<div class="col-9 title_right">
<div class="col-6 text_right">东方航空</div>
<div class="col-6 text_left">CA12345</div>
</div>
</div>
<div class="row content">
<div class="ticket_detail">
<div class="col-5 text_left">
<div class="airport_en">
PEK
</div>
<div class="airport_cn">
北京首都T3
</div>
<div class="tip">
计划起飞
</div>
<div class="time">
17:10
</div>
</div>
<div class="col-2">
<img src="./image/plane.png" class="img_center"/>
</div>
<div class="col-5 text_right">
<div class="airport_en">
CAN
</div>
<div class="airport_cn">
广州白云A
</div>
<div class="tip">
计划达到
</div>
<div class="time">
20:10
</div>
</div>
</div>
<div class="ticket_boarding">
<div class="col-4 text_left">
<div class="airport_en">
值机柜台
</div>
<div class="text_center">
A
</div>
</div>
<div class="col-4 text_center">
<div class="airport_en">
登机口
</div>
<div class="airport_cn">
A18
</div>
</div>
<div class="col-4 text_right">
<div class="airport_en">
行李转盘
</div>
<div class="text_center">
--
</div>
</div>
</div>
</div>
<div class="row footer text_center">
行程助手航班信息由非常准提供
</div>
</body>
</html>
重点看布局css,哈哈，随带示例用了下less语法
