技术问答css3濡備綍瀹炵幇澶氬垪甯冨眬 - 扬州沐宇科技

css3瀹炵幇澶氬垪甯冨眬鐨勬柟娉曪細閫氳繃columns灞炴€у疄鐜板鍒楀竷灞€锛屼笉绠′綘鎯宠涓€娈垫枃鏈憟澶氬皯鍒楁樉绀猴紝鍙渶瑕佽缃繖涓や釜灞炴€э細column-count 鍜?column-width锛屽叾涓璫olumn-count灞炴€ц缃垪鐨勫叿浣撲釜鏁帮紝column-width灞炴€ф帶鍒跺垪鐨勫搴︺€?/p>

css3濡備綍瀹炵幇澶氬垪甯冨眬

鍏蜂綋浣跨敤绀轰緥锛?/p>

1.棣栧厛鍒涘缓涓€涓猦tml鏂囦欢銆?/p>

2.鍦╤tml鏂囦欢涓坊鍔爃tml浠ｇ爜鏋舵瀯銆?/p>

<!DOCTYPE html>
<html>
    <head>
<meta charset="UTF-8">
        <title>澶氬垪甯冨眬</title>
    </head>
    <body>
    </body>
</html>

3.鐒跺悗鍦╤tml浠ｇ爜鏋舵瀯涓殑body鏍囩閲岄潰浣跨敤div鏍囩骞舵坊鍔犱竴娈垫枃鏈€?/p>

鈥滃綋鎴戝勾杞荤殑鏃跺€欙紝鎴戞ⅵ鎯虫敼鍙樿繖涓笘鐣岋紱褰撴垜鎴愮啛浠ュ悗锛屾垜鍙戠幇鎴戜笉鑳藉鏀瑰彉杩欎釜涓栫晫锛屾垜灏嗙洰鍏夌缉鐭簡浜涳紝鍐冲畾鍙敼鍙樻垜鐨勫浗瀹讹紱褰撴垜杩涘叆鏆勾浠ュ悗锛屾垜鍙戠幇鎴戜笉鑳藉鏀瑰彉鎴戜滑鐨勫浗瀹讹紝鎴戠殑鏈€鍚庢効鏈涗粎浠呮槸鏀瑰彉涓€涓嬫垜鐨勫搴紝浣嗘槸锛岃繖涔熶笉鍙兘銆傚綋鎴戠幇鍦ㄨ汉鍦ㄥ簥涓婏紝琛屽皢灏辨湪鏃讹紝鎴戠獊鐒舵剰璇嗗埌锛氬鏋滀竴寮€濮嬫垜浠呬粎鍘绘敼鍙樻垜鑷繁锛岀劧鍚庯紝鎴戝彲鑳芥敼鍙樻垜鐨勫搴紱鍦ㄥ浜虹殑甯姪鍜岄紦鍔变笅锛屾垜鍙兘涓哄浗瀹跺仛涓€浜涗簨鎯咃紱鐒跺悗锛岃皝鐭ラ亾鍛?鎴戠敋鑷冲彲鑳芥敼鍙樿繖涓笘鐣屻€傗€?/p>

</div>

4.鍦╤tml鏋舵瀯涓殑html鏍囩閲岄潰娣诲姞style鏍囩骞跺啓鍏ss鏍峰紡浠ｇ爜鏉ュ疄鐜板鍒楀竷灞€銆?/p>

<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>

5.鏈€鍚庡彲閫氳繃娴忚鍣ㄦ柟寮忛槄璇籬tml鏂囦欢鏌ョ湅璁捐鏁堟灉銆?/p>

瀹屾暣绀轰緥浠ｇ爜濡備笅锛?/p>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>澶氬垪甯冨眬</title> 
<style> 
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
</head>
<body>
<div class="newspaper">
鈥滃綋鎴戝勾杞荤殑鏃跺€欙紝鎴戞ⅵ鎯虫敼鍙樿繖涓笘鐣岋紱褰撴垜鎴愮啛浠ュ悗锛屾垜鍙戠幇鎴戜笉鑳藉鏀瑰彉杩欎釜涓栫晫锛屾垜灏嗙洰鍏夌缉鐭簡浜涳紝鍐冲畾鍙敼鍙樻垜鐨勫浗瀹讹紱褰撴垜杩涘叆鏆勾浠ュ悗锛屾垜鍙戠幇鎴戜笉鑳藉鏀瑰彉鎴戜滑鐨勫浗瀹讹紝鎴戠殑鏈€鍚庢効鏈涗粎浠呮槸鏀瑰彉涓€涓嬫垜鐨勫搴紝浣嗘槸锛岃繖涔熶笉鍙兘銆傚綋鎴戠幇鍦ㄨ汉鍦ㄥ簥涓婏紝琛屽皢灏辨湪鏃讹紝鎴戠獊鐒舵剰璇嗗埌锛氬鏋滀竴寮€濮嬫垜浠呬粎鍘绘敼鍙樻垜鑷繁锛岀劧鍚庯紝鎴戝彲鑳芥敼鍙樻垜鐨勫搴紱鍦ㄥ浜虹殑甯姪鍜岄紦鍔变笅锛屾垜鍙兘涓哄浗瀹跺仛涓€浜涗簨鎯咃紱鐒跺悗锛岃皝鐭ラ亾鍛?鎴戠敋鑷冲彲鑳芥敼鍙樿繖涓笘鐣屻€傗€?/p>
</div>
</body>
</html>