CSS 标签左右分布的多种方法
生活随笔
收集整理的這篇文章主要介紹了
CSS 标签左右分布的多种方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS 標簽左右發布的多種方法
- 第一種用flex布局（推薦）
- 第二種浮動（不推薦）
- 第三種position定位（不推薦）
- 總結
第一種用flex布局（推薦）
改變justify-content樣式屬性有不同的發布，有興趣的可以試試
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style> .flexs{display: flex;justify-content: space-between;align-items: center; } </style></head><body><div class="flexs"><div >左邊</div><div>右邊</div></div></body> </html>效果圖
第二種浮動（不推薦）
如果左右標簽的寬高不同可能不會是水平分布
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style> .divleft{ float:left } .divright{ float:right} </style></head><body><div class="flexs"><div class="divleft">左邊</div><div class="divright">右邊</div></div></body> </html>效果圖
第三種position定位（不推薦）
浮動在不同的瀏覽器和頁面大小中效果的是不同的，而且如果左右標簽的寬高不同可能不會是水平分布，還得慢慢的調整
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style> .divleft{ position:relative } .divright{ position: relative;top: -22px;left: 95%; } </style></head><body><div class="flexs"><div class="divleft">左邊</div><div class="divright">右邊</div></div></body> </html>效果圖
總結
本人一開始用的是flot浮動的方法來就行左右分布，后來發現有position的方法，可是這兩種都不能讓標簽完美的水平分布，水平居中，還得用left,top,margin-left.margin-top來調整，代碼過多，后來發現了flex布局，用了之后感覺這種更快捷更能顯示出效果。當然這是憑個人喜好而定的。
最后附上一個看flex的網址
總結
以上是生活随笔為你收集整理的CSS 标签左右分布的多种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python聚类分析结果很差_pytho
- 下一篇： 深入理解javascript函数进阶系列