CSS甯冨眬(鍥? 宸﹀彸甯冨眬

鏈枃鏄牴鎹綉涓婅祫鏂欐€荤粨鍑烘潵鐨勬枃绔燑/p>

宸﹁竟鍥哄畾锛屽彸杈硅嚜閫傚簲鐨勪袱鏍忓竷灞€銆侟/p>

鍩烘湰鏍峰紡

   
     宸﹁竟鍥哄畾瀹藉害锛岄珮搴︿笉鍥哄畾  楂樺害鏈夊彲鑳戒細寰堝皬锛屼篃鍙兘寰堝ぇ銆   
   
     杩欓噷鐨勫唴瀹瑰彲鑳芥瘮宸︿晶楂橈紝涔熷彲鑳芥瘮宸︿晶浣庛€傚搴﹂渶瑕佽嚜閫傚簲銆?lt;/br>     鍩烘湰鐨勬牱寮忔槸锛屼袱涓猟iv鐩歌窛20px, 宸︿晶div瀹 120px   
 
  .wrapper {     padding: 15px 20px;     border: 1px dashed #ff6c60; } .left {     width: 120px;     border: 5px solid #ddd; } .right {     margin-left: 20px;     border: 5px solid #ddd; }

閫氳繃width: calc(100% - 140px)鏉ュ姩鎬佽绠楀彸渚х洅瀛愮殑瀹藉害銆傞渶瑕佺煡閬撳彸渚х洅瀛愯窛绂诲乏杈圭殑璺濈锛屼互鍙婂乏渚х洅瀛愬叿浣撶殑瀹藉害(content+padding+border)锛屼互姝よ绠楃埗瀹瑰櫒瀹藉害鐨?00%闇€瑕佸噺鍘荤殑鏁板€笺€傚悓鏃讹紝杩橀渶瑕佺煡閬撳彸渚х洅瀛愮殑瀹藉害鏄惁鍖呭惈border鐨勫搴︺€侟/p>

.wrapper-inline-block {     box-sizing: content-box;     font-size: 0;    // 娑堥櫎绌烘牸鐨勫奖鍝 }  .wrapper-inline-block .left, .wrapper-inline-block .right {     display: inline-block;     vertical-align: top;    // 椤剁瀵归綈     font-size: 14px;     box-sizing: border-box; }  .wrapper-inline-block .right {     width: calc(100% - 140px); }

閫氳繃鍔ㄦ€佽绠楀搴︽潵瀹炵幇鑷€傚簲銆備絾鏄紝鐢变簬娴姩鐨刡lock鍏冪礌鍦ㄦ湁绌洪棿鐨勬儏鍐典笅浼氫緷娆＄揣璐达紝鎺掑垪鍦ㄤ竴琛岋紝鎵€浠ユ棤闇€璁剧疆display: inline-block;锛岃嚜鐒朵篃灏卞皯浜嗛《绔榻愶紝绌烘牸瀛楃鍗犵┖闂寸瓑闂銆侟/p>

.wrapper-double-float {     overflow: auto;        // 娓呴櫎娴姩     box-sizing: content-box; }  .wrapper-double-float .left, .wrapper-double-float .right {     float: left;     box-sizing: border-box; }  .wrapper-double-float .right {     width: calc(100% - 140px); }

block绾у埆鐨勫厓绱犵洅瀛愮殑瀹藉害鍏锋湁濉弧鐖跺鍣紝骞堕殢鐫€鐖跺鍣ㄧ殑瀹藉害鑷€傚簲鐨勬祦鍔ㄧ壒鎬с€侟/p>

.wrapper-float {     overflow: hidden;        // 娓呴櫎娴姩 }  .wrapper-float .left {     float: left; }  .wrapper-float .right {     margin-left: 150px; }

鍙﹀涓€绉嶈涓や釜block鎺掑垪鍒颁竴璧风殑鏂规硶鏄宸︿晶鐩掑瓙浣跨敤position: absolute鐨勭粷瀵瑰畾浣嶃€傝繖鏍凤紝鍙充晶鐩掑瓙涔熻兘鏃犺鎺夊畠銆侟/p>

.wrapper-absolute .left {     position: absolute; }  .wrapper-absolute .right {     margin-left: 150px; }

鍦ㄦ甯告祦涓紝濡傛灉鍏冪礌寤虹珛浜嗕竴涓柊鐨勫潡鏍煎紡鍖栦笂涓嬫枃(渚嬪锛岄櫎浜嗏€滃彲瑙佲€濅箣澶栵紝鍏锋湁鈥渙verflow鈥濈殑鍏冪礌)锛屽垯涓嶈兘涓庡厓绱犳湰韬湪鐩稿悓鍧楁牸寮忓寲涓婁笅鏂囦腑鐨勪换浣曟诞鍔ㄧ殑绌虹櫧妗嗛噸鍙燑/p>

.wrapper-float-bfc {     overflow: auto; }  .wrapper-float-bfc .left {     float: left;     margin-right: 20px; }  .wrapper-float-bfc .right {     margin-left: 0;     overflow: auto; }

.wrapper-flex {     display: flex;     align-items: flex-start; }  .wrapper-flex .left {     flex: 0 0 auto; }  .wrapper-flex .right {     flex: 1 1 auto; }

.wrapper-grid {     display: grid;     grid-template-columns: 120px 1fr;     align-items: start; }  .wrapper-grid .left, .wrapper-grid .right {     box-sizing: border-box; }  .wrapper-grid .left {     grid-column: 1; }  .wrapper-grid .right {     grid-column: 2; }