✍ 📁 🙈 🙉 🙊 : 標簽 <div> 對齊

顯示具有 標簽 <div> 對齊 標籤的文章。顯示所有文章

display table

CSS display:table-caption

<table border="1" style="width: 100%;"><tbody>
<tr><th>值</th><th>描述</th></tr>
<tr><td> display:table
</td><td> 顯示 表格 類似 <<c>table></td></tr>
<tr><td> display:table-row-group
</td><td> 行的分組  類似 <<c>tbody></td></tr>
<tr><td> display:table-header-group
</td><td> 表格頭組 類似 <<c>thead></td></tr>
<tr><td> display:table-footer-group
</td><td> 表格尾組 類似<<c>tfoot></td></tr>
<tr><td> display:table-row
</td><td> 表格換行 類似 <<c>tr></td></tr>
<tr><td> display:table-column-group
</td><td> 列的分組 類似 <<c>colgroup></td></tr>
<tr><td> display:table-column 
</td><td> 格列顯示 類似 <<c>col></td></tr>
<tr><td> display:table-cell
</td><td> 表格單元格 類似 <<c>td> 和 <<c>th></td></tr>
<tr><td> display:table-caption
</td><td> 表格標題 類似 <<c>caption></td></tr>
</tbody></table>

<pre><b>Example 1</b>
 <<c>div class="Table"> <<c>!-- similar <<c>table>-->
      <<c>div class="tr" >   <<c>!-- similar <<c>tr>----->
           <<c>!-- similar <<c>td> ------>
           <<c>div class="td alignCenter verticalAlignTop" >
           text-align:center;<<c>br>vertical-align:top;<<c>/div>
 
          <<c>div class="td alignCenter verticalAlignMiddle">
          text-align:center;<<c>br>vertical-align:middle;<<c>/div>
 
          <<c>div class="td alignCenter verticalAlignBottom">
          text-align:center;<<c>br>vertical-align: bottom;<<c>/div>
      <<c>/div>

<<c>div class="tr" >  <<c>!-- similar <<c>tr>-->
          <<c>!-- similar <<c>td> ------>
          <<c>div class="td alignLeft verticalAlignTop">
          text-align:left;<<c>br>vertical-align:top;<<c>/div>
 
          <<c>div class="td alignCenter verticalAlignMiddle" >
          text-align: center;<<c>br>vertical-align: middle;<<c>/div>
 
          <<c>div  class="td alignRight verticalAlignBottom " >
          text-align:right ;<<c>br>vertical-align: bottom;<<c>/div>
      <<c>/div>
<<c>/div>
<<c>style>
.Table {display:table;width: 100%;font-size: 23px;}
div    {border: 1px solid #f00;}
.tr    {display:table-row;height: 200px; }
.td    {display:table-cell;width:33%;}
.alignCenter  {text-align:center;}
.alignLeft    {text-align:left;}
.alignRight   {text-align:right;}

.verticalAlignTop    {vertical-align:top;}
.verticalAlignMiddle {vertical-align:middle;}
.verticalAlignBottom {vertical-align:bottom;}
<<c>/style>

</pre>
<style> 
td {padding-left:10px}

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

<b>Example 1</b>
<div class="Table">

<div class="td alignCenter verticalAlignTop" >
text-align:center;<br>vertical-align:top;</div>
 
<div class="td alignCenter verticalAlignMiddle">
text-align:center;<br>vertical-align:middle;</div>
 
<div class="td alignCenter verticalAlignBottom">
text-align:center;<br>vertical-align: bottom;</div>
</div>

<div class="td alignLeft verticalAlignTop">
text-align:left;<br>vertical-align:top;</div>
 
<div class="td alignCenter verticalAlignMiddle" >
text-align: center;<br>vertical-align: middle;</div>
 
<div  class="td alignRight verticalAlignBottom " >
text-align:right ;<br>vertical-align: bottom;</div>
    </div>

.verticalAlignTop    {vertical-align:top;}
.verticalAlignMiddle {vertical-align:middle;}
.verticalAlignBottom {vertical-align:bottom;}
</style>

<br>
<div style="display:table;width:90%;padding:30px" >
 
    <div style="display:table-cell;width: 33% ;
               border: 1px solid #f00;" >
               inner Div CSS<br>
               display:table-cell<br>width: 33%</div>

<div style="display:table-cell;width: 33% ;
               border: 1px solid #f00;" >
               inner Div CSS<br>
               display:table-cell<br>width: 33%</div>

</div>

<span style="position:relative ;background:gold;
       top:-270px ; left:20px;">
       outer Div CSS display:table ; width:90%</span>
<style>
div{border: 1px solid #f00;height: 200px;}
</style>

<pre>
<<c>div style="display:table;width:90%;padding:30px" >
    <<c>div style="display:table-cell;width: 33% ;
               border: 1px solid #f00;" >
               inner Div CSS<<c>br>
               display:table-cell<<c>br>width: 33%<<c>/div>
    <<c>div style="display:table-cell;width: 33% ;
               border: 1px solid #f00;" >
               inner Div CSS<<c>br>
               display:table-cell<<c>br>width: 33%<<c>/div>
    <<c>div style="display:table-cell;width: 33% ;
               border: 1px solid #f00;" >
               inner Div CSS<<c>br>
               display:table-cell<<c>br>width: 33%<<c>/div>
<<c>/div>

<<c>span style="position:relative ;background:gold;
       top:-270px ; left:20px;">
       outer Div CSS display:table ; width:90%<<c>/span>
<<c>style>
div{border: 1px solid #f00;height: 200px;}
<<c>/style></pre>

Edit

#html #網頁格式 #script #style #div #CSS display:table #CSS display:table-row-group #CSS display:table-header-group #CSS display:table-footer-group #CSS display:table-row #CSS display:table-column-group #CSS display:table-column-group #CSS display:table-column #CSS display:table-cell #CSS display:table-caption #CSS table #CSS tbody #CSS div

CSS display flex

display:flex;
align-items:auto / align-self:auto / align-content:auto

標簽

對齊, CSS display flex 排版工具 , CSS display flex flex-wrap, CSS display flex flex-direction, CSS display flex flex-flow, CSS display flex justify-content, CSS display flex align-item, CSS display flex align-content, CSS display flex align-self, CSS display flex order, CSS display flex Flex ,

<pre> <b> display:flex  排版工具 </b>

如果沒設成 display:flex，可佩配合下列語法 使用 :

1. flex-wrap : nowrap | wrap | wrap-reverse
       nowrap:預設值不能換行  wrap:換行  wrap-reverse:反轉換行

2. flex-direction:row | row-reverse | column | column-reverse
       row (預設值，由左至右，從上到下)
       row-reverse (排列方向和row一樣，但內元件順序會反轉)
       column (先從上到下，再由左至右)
       column-reverse (排列方向和column一樣，但內元件順序會反轉)

3. flex-flow:wrap | column wrap

5. align-item: stretch | flex-start | flex-end | center |
                         baseline 
             flex-start 上至下 開始排   flex-end 下至上 開始排
             stretch 會往交錯軸方向將內元素全部填滿
             center  上至下分中

6. align-content:stretch | flex-start | flex-end | center | 
                   space-around | space-between | space-evenly
           ** flex-wrap:wrap 才能觸發 flex-content **
          stretch 每行將拉伸以填滿剩餘空間     center 左右分中
         flex-start 左側開始排   flex-end 右側開始排   
         Space-around 是平均分配行的位置，上下兩側較小
         Space-between是平均分配行的位置，上下兩側會貼齊
         Space-evenly 是平均分配行的位置，上下兩側 間距皆相同

7. align-self: stretch | flex-start | flex-end | center |
                         baseline 
       align-self和align-item的功能一樣，但它是針對「單一」對象

8. order:0
        order預設值為0，它可以重新定義內元件的排列順序，
        順序會依照數值的大小排列

9. Flex (flex-grow、flex-shrink、flex-basis)

</pre>

<style>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
b{font-size:25px;color:blue;} 
r{font-size:20px;color:red;}

</style>

<b> div Horizontal & Vertical Align 水平垂直置中</b>
<div id="outerDiv">
     <div id="innerDiv">div id="innerDiv"     </div>
</div>

#innerDiv{width:150px ; height:150px;
          background: gray;
          color:white}

pre{position: fixed;top: 20px;left:10px;}
</style>
<pre>div id="outerDiv"

#outerDiv{
 width:100%;height:95%;
 border:1px solid black;  
 display:flex ;
 justify-content:center;
 align-items: center; }

#innerDiv{
 width:150px ; height:150px;
 background: gray;
 color:white }
</pre>
<style>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
b{font-size:25px;color:blue;} 
r{font-size:20px;color:red;}

</style>

<b>display:flex + align-self: flex-start; </b>
<div class="outside_DIV">
<div id="div1">div1<br>flex-start</div>
<div id="div2">div2<br>flex-end</div>
<div id="div3">div3<br>center</div>
<div id="div4">div4<br>stretch</div>
<div id="div5">div5<br>baseline</div>
</div>

<pre>
<<c>style>
#div1 { align-self: flex-start}
#div2 { align-self: flex-end; }
#div3 { align-self: center;   }
#div4 { align-self: stretch;  }
#div5 { align-self: baseline; }
<<c>/style>
</pre>

.outside_DIV div {text-align: center;
	      background: gray;
	      border: 1px solid black;
	      color: white;
	      padding: 0.5em;
	      box-sizing: border-box;
	      flex-basis: 20%; }

b{font-size:25px;color:blue;} 
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
</style>

<b>display:flex + order </b>
<div class="outside_DIV">
<div id="div1">div1<br>flex-start</div>
<div id="div2">div2<br>flex-end</div>
<div id="div3">div3<br>center</div>
<div id="div4">div4<br>stretch</div>
<div id="div5">div5<br>baseline</div>
</div>

<pre>
<<c>style>
#div1 { order: 3 }
#div2 { order: 1 }
#div3 { order: 2 }
#div4 { order: 5 }
#div5 { order: 4 }
<<c>/style>
</pre>

#div1 { order: 3 }
#div2 { order: 1 }
#div3 { order: 2 }
#div4 { order: 5 }
#div5 { order: 4 }

.outside_DIV div {text-align: center;
	      background: gray;
	      border: 1px solid black;
	      color: white;
	      padding: 0.5em;
	      box-sizing: border-box;
	      flex-basis: 20%; }

#outside_DIV div { text-align: center;
	           background: gray;
	           border: 1px solid black;
	           color: white;
	           padding: 0.5em;
	           box-sizing: border-box;
	           flex-basis: 33%; }
</style>
Example
<div id="outside_DIV">
      <div id="div1">01</div>
      <div id="div2">02</div>
      <div id="div3">03</div>
      <div id="div4">04</div>
      <div id="div5">05</div>
</div>

<div id="Input">
align-content : <br>
<label class="container">stretch
  <input type="radio" name="fradio" value="stretch" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">center
  <input type="radio" name="fradio" value="center">
  <span class="checkmark"></span>
</label>
<label class="container">flex-start
  <input type="radio" name="fradio" value="flex-start">
  <span class="checkmark"></span>
</label>
<label class="container">flex-end
  <input type="radio" name="fradio" value="flex-end">
  <span class="checkmark"></span>
</label>
<br><br>
<label class="container">flex-end
  <input type="radio" name="fradio" value="flex-end">
  <span class="checkmark"></span>
</label>
<label class="container">space-between
  <input type="radio" name="fradio" value="space-between">
  <span class="checkmark"></span>
</label>
<label class="container">space-around
  <input type="radio" name="fradio" value="space-around">
  <span class="checkmark"></span>
</label>
<label class="container">initial
  <input type="radio" name="fradio" value="initial">
  <span class="checkmark"></span>
</label>
<label class="container">inherit
  <input type="radio" name="fradio" value="inherit">
  <span class="checkmark"></span>
</label>
</div>

var Tag= document.querySelectorAll('input[name="fradio"]') ;
Tag.forEach((round) => {
  round.addEventListener("click", function() {
  outside_DIV.style.alignContent=round.value;
  DP1.innerHTML = round.value ;
  //DPM.innerHTML = round.value ;

}) })
</script>

<pre>
<<c>style>
#outside_DIV{ height: 250px;background: #def;
              display: flex; 
              flex-wrap: wrap;
              <r>align-content: <span id="DP1">stretch</span> ;</r>  }
<</c>/style>
<</c>div id="outside_DIV">
      <</c>div id="div1">01<</c>/div>
      <</c>div id="div2">02<</c>/div>
      <</c>div id="div3">03<</c>/div>
      <</c>div id="div4">04<</c>/div>
      <</c>div id="div5">05<</c>/div>
<</c>/div></pre>

<style>

b{font-size:25px;color:blue;} 
r{font-size:20px;color:red;}
b{font-size:25px;color:blue;}
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.container { position: relative;
             padding-left: 25px;
             cursor: pointer;
             font-size: 22px; }
.container input { opacity: 0;
                   cursor: pointer;}
.checkmark { position: absolute;
             top: 0;
             left: 0;
             height: 25px;
             width: 25px;
             background-color: #C0C0C0;
             border-radius: 50%;}
.container:hover input ~ .checkmark {
                background-color: #808080; }
.container input:checked ~ .checkmark {
                background-color: #2196F3; }
.checkmark:after { content: "";
                   position: absolute;
                   display: none }
.container input:checked ~ .checkmark:after {
    display: block; }

.container .checkmark:after { top: 9px;
                              left: 9px;
                              width: 8px;
                              height: 8px;
                              border-radius: 50%;
                              background: white;}
</style>

</div>
</div>

#outerDiv{width:50% ; height:60%;
          border: 1px solid black;
          display: initial ;
          justify-content: start;
          align-items: normal;
          flex-direction: row;
          flex-wrap:nowrap ;}

.innerDiv{width:80px ; height:70px;
          border: 1px solid black;}

</style>
<table border="1" style="width: 95%;"><tbody>
<tr><td style="width: 300px;">

display: <select onchange="Display(this.value)">
  <option value="initial">initial </option>
  <option value="flex">flex</option>
  <option value="inline-flex">inline-flex</option>
</select> 
 <br>
 justify-content: <select onchange="justifyContent(this.value)">
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="baseline">baseline</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</option>
  <option value="space-between" >space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
</select> 
<br>
 align-items: <select onchange="alignItems(this.value)">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" >center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

<option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>

<option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

<option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select> ; 
<br>
 flex-direction: <select onchange="flexDirection(this.value)">
    <option value="row">row</option>
    <option value="row-reverse">row-reverse</option>
    <option value="column">column</option>
    <option value="column-reverse">column-reverse</option>
  </select> ; 
<br>
 flex-wrap: <select onchange="flexWrap(this.value)">
    <option value="nowrap">nowrap</option>
    <option value="wrap">wrap</option>
    <option value="wrap-reverse">wrap-reverse</option>
  </select> ;
</td><td>

function DPcss() {
var tt="<pre>" ; 
tt += "<<c>style>  " ;
tt += "\n  #outerDiv {" ;
tt += "\n    width:50% ; height:60% ;" ;
tt += "\n    border: 1px solid black ;" ;
tt += "\n    display: " ;
tt += outerDiv.style.display + " ;" ;

tt += "\n    justify-content:" ;
tt += outerDiv.style.justifyContent+ " ;" ;

tt += "\n    align-items:" ;
tt += outerDiv.style.alignItems+ " ;" ;

tt += "\n    flex-direction: row ;" ;
tt += outerDiv.style.flexDirection+ " ;" ;

tt += "\n    flex-wrap:nowrap ;" ;
tt += outerDiv.style.flexWrap+ " ;" ;

tt += "\n }</pre>"

DPspan.innerHTML= tt ;

} DPcss();

function Display(x) {
outerDiv.style.display = x ; DPcss();}

function alignItems(x){
outerDiv.style.alignItems = x ;DPcss();}

function justifyContent(x){
outerDiv.style.justifyContent= x ;DPcss();}

function flexDirection(x){
outerDiv.style.flexDirection= x ;DPcss();}

function flexWrap(x){
outerDiv.style.flexWrap= x ;DPcss();}

</script>

Edit

#html #網頁格式 #script #style #div #CSS div #CSS align-items #CSS align-self #CSS align-content #CSS flex #CSS flex-basis #CSS flex-basis

flex-flow flex-direction flex-wrap

ul {list-style: none;
  display: flex;
  flex-wrap: wrap;
}

li { padding:2px;
  height: 100px;
  flex-grow: 58;
}

li:last-child {
  // There's no science in using "10" here. In all my testing, this delivered the best results.
  flex-grow: 60;
}

img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

</style>

<div style="width: 100%; height:400px;display: flex;
            display:flex ; justify-content: center;
            align-items : center; border: 3px solid;">
<div id="outerDiv">
  <div id="div1">1 </div>
  <div id="div2">2 </div>
  <div id="div3">3 </div>
  <div id="div4">4 </div>
  <div id="div5">5 </div>
 </div></div>
<div id="out">id=outerDiv</div>

#sel , #sel select  {font-size: 20px ;}
#outerDiv{ width: 40%; height:200px;
           border: 3px solid;
           display: flex;
           flex-direction: row; 
           flex-wrap: nowrap        }

#outerDiv div { display:inherit;flex:1;
                justify-content: center;
                align-items : center;font-size: 20px ;
                border: 1px solid black; }
}	
</style>

<table border="1" width="100%"><tbody>
<tr><td>	
<div id="sel">
outerDiv.display :
<select onchange="outerDiv.style.display = this.value">
    <option value="flex" >flex</option>
    <option value="initial"       >  initial</option>
    <option value="inherit"       > inherit</option>
</select>
<br>
	
outerDiv.flex-direction :
<select onchange="outerDiv.style.flexDirection= this.value">
    <option value="row"     > row</option>
    <option value="row-reverse" >row-reverse</option>
    <option value="column"   > column</option>
    <option value="column-reverse"    >  column-reverse</option>
    <option value=" initial"       >  initial</option>
    <option value="inherit"       > inherit</option>
</select>
<br> 
outerDiv.flex-wrap :
<select onchange="outerDiv.style.flexWrap= this.value">
    <option value="nowrap"     > nowrap</option>
    <option value="wrap" >wrap</option>
    <option value="wrap-reverse"   > wrap-reverse</option>
    <option value=" initial"       >  initial</option>
    <option value="inherit"       > inherit</option>
</select>
<br><br> 
innerDiv.flex:
<select onchange="Fff(this.value)">
    <option value="1" > 1</option>
    <option value="0" >0</option>
</select>
<br>
innerDiv div quantity
<select onchange="Dq(this.value)">
    <option value="5" >5</option>
    <option value="3" >3</option>
    <option value="1" >1</option>
</select>

</td><td><pre><div id="DP"></div></pre>
</td></tr></tbody></table>

if(x == 1){ div2.style.display="none" ;
            div3.style.display="none" ;
            div4.style.display="none" ;
            div5.style.display="none" ;}

if(x == 3){ div4.style.display="none" ;
            div5.style.display="none" ;}

}

function Fff(x){
div1.style.flex = x;
div2.style.flex = x;
div3.style.flex = x;
div4.style.flex = x;
div5.style.flex = x;
}

outerDiv.style.flexDirection="row";
outerDiv.style.flexWrap="nowrap";
window.addEventListener( "change", DDP)
function DDP() {
var tx="<font size=4> outerDivdiv CSS<br>" ;
tx += " width:60%; height:300px ;<br>" ;
tx += " border:3px solid;<br>" ;
tx += " display:flex <br>" ; 
tx += " flex-direction:"+ outerDiv.style.flexDirection+" ;<br>" ;
tx += " flex-wrap: "+ outerDiv.style.flexWrap +" ;  " ;
DP.innerHTML =tx;
//alert()
}

function divD(x , c) {
x.style.display="flex";
if(c.checked) {x.style.display="none";} 
}
DDP();
</script>

Edit

#html #style #script #javascript #CSS

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

display table

CSS display:table-caption

CSS display flex

display:flex;
align-items:auto / align-self:auto / align-content:auto

flex-flow flex-direction flex-wrap

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

display table

CSS display:table-caption

CSS display flex

display:flex; align-items:auto / align-self:auto / align-content:auto

flex-flow flex-direction flex-wrap

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

display:flex;
align-items:auto / align-self:auto / align-content:auto