Css3 常用佈局方式 一行兩列&高度固定&某列寬度自適應
方案有很多種,根據自己的喜好和實際場景選擇方式
一、float +margin 方式 (推薦)
此方式,使用度高,擴展強,兼容性好。 使用到垂直方向居中,參考:CSS網頁佈局垂直居中整理
示例1:
css 代碼
/* 一行兩列,高度固定,某一列寬度自適應*/ .list { background: rgb(253, 236, 236); } .list .line { padding: 0px 10px; height: 50px; line-height: 50px; border: 0px solid blue; } .list .icon { width: 22px; height: 22px; border: 1px solid red; border-radius: 50%; float: left; position: relative; top: 50%; transform: translateY(-50%); } .list .icon img { width: 100%; height: 100%; display: block; } .list .content { margin-left: 35px; font-size: 15px; color: #333; border-bottom: 1px solid lightgray; } .list .last-content { border-bottom: 0; }
html代碼:
<div class="list"> <div class="line"> <div class="icon"> <img src="http://www.jnqianle.cn/img/index/mall1.png" alt=""> </div> <div class="content"> 功能菜單名稱1 </div> </div> <div class="line"> <div class="icon"> <img src="http://www.jnqianle.cn/img/index/order1.png" alt=""> </div> <div class="content"> 功能菜單名稱2 </div> </div> <div class="line"> <div class="icon"> <img src="http://www.jnqianle.cn/img/index/mall2.png" alt=""> </div> <div class="content last-content"> 功能菜單名稱3 </div> </div> </div>
顯示效果:
示例2:
css代碼
.list { border: 1px solid red; } .line { height: 50px; line-height: 50px; padding: 0px 10px; border-bottom: 1px solid gray; } .line .left { float: left; width: 30px; height: 30px; background: green; position: relative; top: 50%; transform: translateY(-50%); } .line .center { margin-left: 40px; margin-right: 40px; } .line .right { float: right; width: 30px; height: 30px; background: red; position: relative; top: 50%; transform: translateY(-50%); }
html,特別注意,center放在最下邊
<div class="list"> <div class="line"> <div class="left"> </div> <div class="right"> </div> <div class="center"> 菜單1 </div> </div> <div class="line"> <div class="left"> </div> <div class="right"> </div> <div class="center"> 菜單1 </div> </div> <div class="line"> <div class="left"> </div> <div class="right"> </div> <div class="center"> 菜單1 </div> </div> </div>
顯示效果:
二、待完善
更多:
CSS美化 input type=file 兼容各個瀏覽器(轉)