【原】css實現兩端對齊的3種方法

時間 2019-11-12

標籤 css 實現兩端對齊方法欄目 CSS 简体版

原文原文鏈接

說到兩端對齊，你們並不陌生，在word、powerpoint、outlook等界面導航處，其實都有一個兩端對齊(分散對齊)的按鈕，平時使用的也很少，咱們更習慣與左對齊、居中對齊、右對齊的方式來對齊頁面的文本或模塊。css

響應式網頁設計出現以來，更可能是使用百分比布自適應佈局，特別是在移動端，兩端對齊的方式顯得愈來愈重要。那麼，如何使用css實現兩端對齊，相信不少同窗會文本對齊的text-align:justify，這是今天要講的其中一種方式，另外還有兩種更精彩的實現方式，請往下看~html

下圖是須要實現的demo，取了寬度分別爲320px、480px、640px下的截圖，也就是說再隨瀏覽器窗口寬度的調整，按鈕菜單高度不變，寬度會按比例自動適應，且左右兩端對齊：css3

目錄（更新於20161028）

方法一：使用text-align:justify

感謝join同窗提供的方案，使用該方案能夠作到兼容全部的瀏覽器，不過實現起來會比較複雜，並且帶有hack的味道app

text-align:justify 屬性是全兼容的，使用它實現兩端對齊，須要注意在模塊之間添加[空格/換行符/製表符]才能起做用，一樣，實現文本對齊也是須要在字與字之間添加[空格/換行符/製表符]才能起做用webapp

HTML：wordpress

<p>模塊內的元素之間爲&nbsp;分隔，只支持webkit和Gecko內核瀏覽器</p>
<br />
<div class="demo"><a class="link" href="#none">10元</a>&nbsp;<a class="link" href="#none">20元</a>&nbsp;<a class="link" href="#none">30元</a>&nbsp;<a class="link" href="#none">50元</a>
</div>
<br />
<p>模塊內的元素之間爲換行符</p>
<br />
<div class="demo">
    <a class="link" href="#none">10元</a>
    <a class="link" href="#none">20元</a>
    <a class="link" href="#none">30元</a>
    <a class="link" href="#none">50元</a>
</div>
<br />
<p>模塊內的元素之間爲空格符</p>
<br />
<div class="demo">
<a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a>
</div>
<br />
<p>模塊內的元素之間爲無分隔符，justify不起做用</p>
<br />
<div class="demo"><a class="link" href="#none">選項1</a><a class="link" href="#none">選項2</a><a class="link" href="#none">選項3</a><a class="link" href="#none">選項4</a></div>
<br />

CSS:

*{margin:0;padding:0;}
/* 
 說明：
 1.IE中要實現塊內單行兩端對齊須要使用其私有屬性text-align-last:justify配合，text-align-last 要生效，必須先定義text-align 爲justify
 2.line-height:0 解決標準瀏覽器容器底部多餘的空白
*/
.demo{
     text-align:justify;
     text-align-last:justify;
     line-height:0;
     height:44px;
}
/*
 說明：
 模塊使用[換行符]或[空格符]後，webkit瀏覽器中會引發最後一個模塊有多餘空白，使用font-size:0可清除該空格
*/
@media all and (-webkit-min-device-pixel-ratio:0){
.demo{
     font-size:0;
}
}
 /* 
 說明：
 1.text-align-last:justify 目前只有IE支持，標準瀏覽器須要使用 .demo:after 僞類模擬相似效果 
 2.opera瀏覽器須要添加 vertical-align:top 才能徹底解決底部多餘的空白
 */
.demo:after{
     display:inline-block;
     overflow:hidden;
     width:100%;
     height:0;
     content:'';
     vertical-align:top;
}
.demo a{
     width:20%;
     display:inline-block;
     height:44px;
     line-height:44px;
     text-align:center;
     border:1px solid #428cc8;
     color:#666;
     font-size:16px;
     margin-bottom:5px;
     border-radius:3px;
     background-color:#fefefe;
     background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
     color:#666;
     text-decoration:none;
}

測試地址：

http://jsbin.com/uGetOJE/1

方法二：使用justify-content:space-between

box-pack是css3的新屬性，依賴於display:box(舊版彈性佈局)，受box-orient影響，box-pack決定了子標籤水平對齊的方式，可選值有start | end | center | justify。使用box-pack:justify來實現兩端對齊很是簡單，代碼量也少。爲了向前看齊，把display:flex(新版彈性佈局)也一塊兒寫進去~

若是是作基於webkit內核的webapp開發和winphone IE10及以上，那麼一切都好辦~

關於盒模型佈局的介紹，這裏有篇文章《CSS box-flex屬性，而後彈性盒子模型簡介》，寫得不錯，推薦給你們~

HTML：

<div class="demo">
    <a class="link" href="#none">10元</a>
    <a class="link" href="#none">20元</a>
    <a class="link" href="#none">30元</a>
    <a class="link" href="#none">50元</a>
</div>

CSS：

*{margin:0;padding:0;}
/*
 說明：
 display:box定義佈局爲盒模型後，可以使用盒模型下的box-pack:justify屬性
*/
.demo{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
}

.demo a{
     width:20%;
     display:block;
     height:44px;
     line-height:44px;
     text-align:center;
     border:1px solid #428cc8;
     color:#666;
     font-size:16px;
     margin-bottom:5px;
     border-radius:3px;
     background-color:#fefefe;
     background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
     color:#666;
     text-decoration:none;
}

測試地址：

http://jsbin.com/qalahihubo

方法三：使用column(多列布局)

column也是是css3的屬性，意思是多列布局，使用column來實現兩端對齊也十分簡單，只須要設置模塊的個數跟column的列數一致便可，不過它的自動適應方式跟使用box-pack還有有點差異，並非很標準，像列與列的間距暫沒法定義爲百分比。值得高興的是目前支持全部高級瀏覽器，對IE10的支持也良好，而IE9及如下版本不支持，webapp開發中，對於不須要兼容winphone7手機(IE9)的需求來講，能夠充分發揮column的強大做用~

關於column的使用方法，w3school的有相關教程：http://www.w3school.com.cn/css3/css3_multiple_columns.asp

HTML：

<div class="demo">
    <a class="link" href="#none">10元</a>
    <a class="link" href="#none">20元</a>
    <a class="link" href="#none">30元</a>
    <a class="link" href="#none">50元</a>
</div>

CSS：

*{margin:0;padding:0;}
/* 
 說明：
 1.column-count定義了對象的列數,例子中有4個模塊，那麼定義爲4列
 2.column-gap定義了對象中列與列的間距，間距不能設置爲百分比，顯得不夠靈活
*/
.demo{
     -webkit-column-count:4;-moz-column-count:4;column-count:4;
     -webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px; 
}

.demo a{
     display:block;
     height:44px;
     line-height:44px;
     text-align:center;
     border:1px solid #428cc8;
     color:#666;
     font-size:16px;
     margin-bottom:5px;
     border-radius:3px;
     background-color:#fefefe;
     background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
     color:#666;
     text-decoration:none;
}