寬度自適應：修訂版本之間的差異

出自六年制學程
跳轉到： 導覽、 搜尋
（新頁面: 分類:HTML ===寬度自適應=== 指元素的寬度會隨著內文的多寡而自動調整。 ====無框表格==== table,th,td 的寬度是自適應的。而整個 table 是可...）
 
 
（未顯示同用戶所作出之3次版本）
第 6 行： 第 6 行：
 
table,th,td 的寬度是自適應的。而整個 table 是可以靠 align 屬性水平置中的。
 
table,th,td 的寬度是自適應的。而整個 table 是可以靠 align 屬性水平置中的。
  
−
====最大寬度與最小寬度====
+
====display:table====
  
 +
====display:inline-block====
 +
行元素是自適應文本長度的
 +
 +
====最大寬度與最小寬度====
 +
下以下 CSS 指示：
 +
<pre>max-width:300px;
 +
min-width:100px;
 +
word-wrap:break-word;</pre>
 +
讓容器伸縮，過長時自動換行。
  
 
====css3 的 fit-content====
 
====css3 的 fit-content====
 +
對選擇器(如 UL)下以下 CSS 指示：
 +
<pre>width:fit-content;
 +
width:-moz-fit-content;
 +
width:-webkit-fit-content;
 +
margin:auto;</pre>
 +
對 firefox 與 chrome 分別下寬度自適應的指示，再用 margin:auto; 將邊沿左右平分
 +
===水平置中===
 +
#margin:auto;
 +
 +
===參考資料===
 +
#[https://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/ 理解CSS3 max/min-content及fit-content等width值]

2019年1月29日 (二) 21:53的最新修訂版本


寬度自適應

指元素的寬度會隨著內文的多寡而自動調整。

無框表格

table,th,td 的寬度是自適應的。而整個 table 是可以靠 align 屬性水平置中的。

display:table

display:inline-block

行元素是自適應文本長度的

最大寬度與最小寬度

下以下 CSS 指示： 

max-width:300px;
min-width:100px;
word-wrap:break-word;

讓容器伸縮，過長時自動換行。

css3 的 fit-content

對選擇器(如 UL)下以下 CSS 指示： 

width:fit-content;
width:-moz-fit-content;
width:-webkit-fit-content;
margin:auto;

對 firefox 與 chrome 分別下寬度自適應的指示，再用 margin:auto; 將邊沿左右平分

水平置中

  1. margin:auto;

參考資料

  1. 理解CSS3 max/min-content及fit-content等width值
取自「http://jendo.org/wiki1231/index.php?title=寬度自適應&oldid=47429」