CSS3中的布局技巧非常豐富,其中左右并排是一個非常常見的布局需求。下面我們來一起探討幾種實現方法:
.left{ float: left; /* 左浮動 */ width: 50%; /* 寬度占50% */ } .right{ float: right; /* 右浮動 */ width: 50%; /* 寬度占50% */ }
上述代碼中,我們使用了float浮動布局實現左右并排。通過設置元素的寬度使其占據一半的寬度,達到我們預期的效果。
.parent{ display: flex; /* 彈性布局 */ justify-content: space-between; /* 沿主軸對齊,間距為兩端 */ } .child{ width: 50%; /* 寬度占50% */ }
另外一種實現方式則是通過CSS3中新增的彈性布局。我們使用display:flex來定義一個彈性容器,再利用justify-content屬性設置沿主軸對齊方式,這里我們選擇了把兩個子元素之間的距離設為兩端對齊,最終實現了左右并排的效果。
這里介紹的僅是其中的幾種方法,CSS3提供的布局方式豐富多彩,有興趣的同學可以深入了解。
下一篇css3 開紅包