2021/10/28 diapaly
justify-content: space-between;/* 中間全空 兩端對齊 */
align-items: center;/* 元素垂直居中 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/buy.css" />
</head>
<body>
<div class="content">
<div class="nav">
<a href="index.html">首頁</a>>
<a href="list.html">專輯</a>>
<span>【獨家發售】張大偉2018全新專輯《人間精品》</span>
</div>
<div class="text">
<div class="left">
<img src="img/img/pro/7_418x418.jpg" alt="">
<div>
<span class="love"></span>
<span class="num">0</span>
</div>
<img src="img/img/details-i.png" alt="">
</div>
<div class="right">
<div class="title">【獨家發售】張大偉2018全新專輯《人間精品》</div>
<div>
<span class="dt">商城價格</span>
<span class="money">￥83.1</span>
<span class="del">￥83.1</span>
</div>
<hr>
<div><span class="dt">重量</span><span class="weight">0.33kg</span></div>
<div><span class="dt">數量</span><img class="im" src="img/img/num.jpg" alt=""></div>
<div class="sp"><span class="cart"></span><span class="buy"></span></div>
<div><img src="img/img/zpbz.png" alt=""></div>
</div>
</div>
<div class="img">
<img src="img/img/tuangou20180126.jpg">
</div>
</div>
<div class="footer">
<img src="img/img/footer_v180123.png" >
<div class="about">
<div class="ul1">
<ul>
<li>關於我們</li>
<li>人才招聘</li>
<li>聯絡我們</li>
<li>友情連結</li>
<li>版本宣告</li>
<li>客服中心</li>
</ul>
</div>
<div class="ul2">
<img src="img/img/culture.png" >
<ul>
<li>友情連結友情連結友情連結友情連結友情連結友情連結友情連結</li>
<li>友情連結友情連結友情連結友</li>
<li>友情連結友情連結友情連結友</li>
</ul>
</div>
<div class="ul3">
<ul>
<li>友情連結友情連結友情連結友情連結友情連結友情連結友情連結</li>
<li>友情連結友情連結友情連結友</li>
<li>友情連結友情連結友情連結友</li>
<li>友情連結友情連結友情連結友</li>
<li>友情連結友情連結友情連結友</li>
</ul>
</div>
<div class="ul4">
<ul>
<li>友情連結友情連結友情連結友情連結友情連結友情連結友情連結</li>
<li>友情連結友情連結友情連結友</li>
</ul>
</div>
</div>
</div>
</body>
</html>
.content{
width: 1000px;
margin: 0px auto;
}
.content .nav{
margin: 15px 0px;
}
.content .nav a{
text-decoration: none;
color: #333333;
margin-right: 5px;
}
.content .nav span{
color: #999999;
}
.content .left{
width: 418px;
display: inline-block;
}
.content .left div{
text-align: right;
}
.content .left .love{
display: inline-block;
width: 12px;
height: 12px;
background-image: url(../img/img/icon/ico.png);
background-position: 0px -73px;
margin-right: 5px;
}
.content .left div .num{
color: #999999;
}
.content .right{
display: inline-block;
vertical-align: top;
margin-left: 30px;
width: 540px;
}
.content .right .title{
font-weight: bolder;
}
.content .right .dt{
display: inline-block;
color: #999999;
width: 80px;
}
.content .right .im{
vertical-align: middle;
}
.content .right .money{
color: #DE4767;
font-size: 26px;
font-weight: bolder;
}
.content .right .del{
text-decoration: line-through;/* 劃過字型的線 */
color: #999999;
font-size: 12px;
}
.content .right div{
line-height: 50px;
}
.content .right .sp{
margin-top: 110px;
}
.content .right .cart{
display: inline-block;
height: 60px;
width: 200px;
background-image: url(../img/img/detail_btn_v1_04.png);
background-position: 0px -3px;
}
.content .right .buy{
display: inline-block;
height: 60px;
width: 200px;
background-image: url(../img/img/detail_btn_v1_04.png);
background-position: 0px 423px;
}
.content .img{
width: 1000px;
margin-top: 20px;
}
.content .img img{
width: 1000px;
}
.footer img{
margin-left: 160px;
margin-top: 20px;
}
.footer .about{
width: 100%;
background-color: #111111;
color: #999999;
}
.footer .about ul{
display: flex;
}
.footer .about .ul1 ul{
display: inline-block;
border-right: 1px solid #999999;
text-align: center;
}