CSS, such as proportional division, in the CSS layout is more important, run the following code to view the case.
In addition to the examples of several methods, there is a better compatibility method, that is, the use of percentages, but add or subtract content, easy to disorder.
| The code is as follows |
Copy Code |
| <! DOCTYPE html>
<meta charset= "Utf-8" >
<link media= "All" href= "/wp-content/themes/tonjayv2/style.css" rel= "stylesheet" >
<meta content= "Width=device-width, initial-scale=1, User-scalable=no, Minimal-ui" name= "viewport" >
<meta content= "Telphone=no" name= "Format-detection" >
<title> Division </title>
<style id= "Jsbin-css" >
. demo {line-height:44px; margin-bottom:20px text-align:center; Background-color: #0078e7; color: #fff;}
Flex-equal,. Flex-center,. Justify {display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex;}
. flex-equal li {-webkit-box-flex:1;-ms-flex:1;-webkit-flex:1; flex:1;}
. table-equal {display:table; table-layout:fixed; width:100%;}
. table-equal li {Display:table-cell;}
. demo-center {border:1px solid #ccc; margin:20px; height:200px;}
. Demo-center. Children {background: #0078e7; color: #fff; width:150px; line-height:5; text-align:center;}
. flex-center {-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center; Justify-content: Center -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; Align-items:center; }
. translate-center {Position:relative}
. Translate-center. Children {position:absolute; top:50%; left:50%;-webkit-transform:translate ( -50%, -50%); transform : Translate (-50%,-50%);}
. justify {-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between; Justify-content: Space-between; Padding:0 10px; Background: #0078e7; Color: #fff; line-height:32px; }
</style>
<body>
<ul class= "flex-equal Demo" >
<li> Mobile </li>
<li> Contact Person </li>
<li> Information </li>
<li> Main Screen </li>
</ul>
<ul class= "flex-equal Demo" >
<li> Mobile </li>
<li> Contact Person </li>
<li> Information </li>
</ul>
<ul class= "table-equal Demo" >
<li> Mobile </li>
<li> Contact Person </li>
<li> Information </li>
<li> Main Screen </li>
</ul>
<ul class= "table-equal Demo" >
<li> Mobile </li>
<li> Contact Person </li>
<li> Information </li>
</ul>
<div class= "Flex-center demo-center" >
<div class= "Children" > child element horizontally centered </div>
</div>
<div class= "Translate-center demo-center" >
<div class= "Children" > child element horizontally centered </div>
</div>
<div class= "Justify" >
<span> Right Alignment </span></div>
</body>
|
