✍ 📁 🙈 🙉 🙊 : CSS float 浮動

CSS Float 浮動

<div id="MMM" >
<div id="Mn1" onclick="MmDd(0)">float left</div>
<div id="Mn2" onclick="MmDd(1)">float right</div>
<div id="Mn3" onclick="MmDd(2)">float none </div>
<div id="Mn4" onclick="MmDd(3)">float left</div>
</div>
<div id="DDD">

<div id="DP1">
<img id="IMG" style="width:auto;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg?quality=82&strip=all&w=200"  />
Float浮動屬性:通常是想在版面上做出文繞圖的效果，但也可以應用在元素的左右對齊。
<br>
讓元素脫離normal flow，浮動到父容器的上內緣（top），並往右right或往左left貼齊父容器的左內緣或右內緣。

<pre>
Float參數值：float:none （元素的預設值）
            float:left （向左浮動）
            float:right（向右浮動）

如上圖 img CSS 用 float:left 。

<<c>style>
#img { float: left ;padding: 7px;}
<<c>/style>

</pre>

<pre>
Float參數值：float:none （元素的預設值）
            float:left （向左浮動）
            float:right（向右浮動）

如上圖 img CSS 用 float:right。

<<c>style>
#img { float: right;padding: 7px;}
<<c>/style>

</pre>

<pre>
Float參數值：float:none （元素的預設值）
            float:left （向左浮動）
            float:right（向右浮動）

如上圖 img CSS 用 float:none。

<<c>style>
#img { float: none ;padding: 7px;}
<<c>/style>

</pre>

<pre>
<<c>div class="normal">
<<c>div class="float">
<<c>/div><<c>/div>
<<c>style>
.float{ background-color: red;
        width: 300px;
        height: 100px;
        float: left; }
.normal{ background-color: green;
         width: 400px;
         height: 120px; }
<<c>/style>

</pre>

</div>

</div>
</div>

#MMM { position: fixed;
       top:5px ;z-index:2  }

#DP1 ,#DP2 ,#DP3 ,#DP4 { height: 550px;
                         width: 96%;
                         border: 1px solid black;
                         margin-top:-0px;
                         background-color:linen ;
                         display:none ;
                         padding:3px;
                         font-size: 22px;
                         position: fixed;
                         top:35px ;
word-break: keep-all; word-wrap: break-word;}
//word-break: normal|break-all|keep-all;

</style>

function MmDd(xx){
MMM.children[0].style.backgroundColor = "silver"; 
MMM.children[0].style.opacity = 0.6 ;
MMM.children[1].style.backgroundColor = "silver"; 
MMM.children[1].style.opacity = 0.6 ;
MMM.children[2].style.backgroundColor = "silver"; 
MMM.children[2].style.opacity = 0.6 ;
MMM.children[3].style.backgroundColor = "silver"; 
MMM.children[3].style.opacity = 0.6 ;

DDD.children[0].style.display = "none" ; 
DDD.children[1].style.display = "none" ; 
DDD.children[2].style.display = "none" ; 
DDD.children[3].style.display = "none" ;

MMM.children[xx].style.backgroundColor = "linen"; 
MMM.children[xx].style.opacity = 1 ; 
DDD.children[xx].style.display = "block" ; 
}

DP1.style.display = "block";
Mn1.style.backgroundColor = "linen ";
Mn1.style.opacity = 1;
</script>

<div>
<img id="IMG" style="width:auto;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg?quality=82&strip=all&w=200" />
<pre>
Float參數值： none （元素的預設值）
             left （向左浮動） 
             right（向右浮動）
 
但也可以應用在元素的左右對齊，浮動到父容器的上內緣（top），
並往右right或往左left貼齊父容器的左內緣或右內緣。
</pre><br><br>

<div id="ch">
<div id="DP" >Css img{ float: left }</div>

<label class="container" >float: left
  <input type="radio" checked="checked" name="radio" 
          onclick="Ccc('left')" >
  <span class="checkmark"></span>
</label>
<label class="container" >float: right
  <input type="radio" name="radio" onclick="Ccc('right')" >
  <span class="checkmark"></span>
</label>
<label class="container" >float: none 
  <input type="radio" name="radio" onclick="Ccc('none' )" >
  <span class="checkmark"></span>
</label>
</div>

}
</script>

.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>

Edit

用JavaScript連結Google Sheets #html #網頁計設計 #script #style #float left #float right #float none

✍ 📁 🙈 🙉 🙊

2023年3月3日星期五

CSS：Float

CSS Float 浮動

slice

2023年3月3日 星期五

CSS：Float

CSS Float 浮動

2023年3月3日星期五