CSS：Float

CSS Float 浮動

<div id="Mnul123456" style="height:500px;width:98%;"> <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> <style> #DP1 img{float: left} </style> </div> <!---------------------------------------------------------------------> <div id="DP2"> <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:right。 <<c>style> #img { float: right;padding: 7px;} <<c>/style> </pre> <style> #DP2 img{float: right} </style> </div> <!---------------------------------------------------------------------> <div id="DP3"> <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:none。 <<c>style> #img { float: none ;padding: 7px;} <<c>/style> </pre> <style> #DP3 img{float: none } </style> </div> <!---------------------------------------------------------------------> <div id="DP4"> <div class="normal"> <div class="float"> </div></div> <style> .float{ background-color: red; width: 300px; height: 100px; float: left; } .normal{ background-color: green; width: 400px; height: 120px; } </style> <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> <style> #IMG {float: left;padding: 7px;} #Mn1 ,#Mn2 ,#Mn3 ,#Mn4 { display:inline-block; height:30px; padding: 0px 8px; border: 1px solid black; background-color: silver ; border-style: solid solid hidden solid; cursor:pointer; border-radius:10px 5px 0px 0px; font-size: 22px; opacity : 0.7} #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> <script type="text/javascript"> 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>

00

<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 type="text/javascript" > function Ccc(xx) { DP.innerHTML = "Css img{ float: " + xx +"}" ; IMG.style.float = xx ; } </script> <style> #IMG{ float: left;padding: 7px;} div { padding: 7px;font-size: 20px ;} #ch {position: fixed ; bottom:100px ; left:10px} .container {position: fixed ; bottom:70px ; left:10px} .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>

00

Edit

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