һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+

[CSS] ѧϰˣַʽ

[]
14921 websjy 2016-8-2 15:50:27
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţע  

x
ʲôǸ

ԪػڸԪصǰԪcssʵָļֶΡ


ŵ㣿

ͨڲԪصʹֶҪ˼ĵиԪ֮ǰ֮Ԫء


ַʽ

һҪ
ͼƬȫ󣬶ֿʾڵһ<ul>ǩڵֹ٣Եڶ<ul>еͼȥimgǩΪimgǩ˸
Ҫ˵һ¸һԣݻ޶ȵռݸܿռ䡣
  1. <style>
  2.     li {
  3.         list-style: none;
  4.     }
  5.     img {
  6.         float: left;
  7.     }
  8.     #container, #container ul {
  9.         width: 500px;
  10.     }
  11. </style>
  12. <div id="container">
  13.     <ul>
  14.         <li><img src="httPS://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100" alt=""></li>
  15.         <li></li>
  16.         <li>ϸ˵֡</li>
  17.     </ul>
  18.     <ul>
  19.         <li><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100" alt=""></li>
  20.         <li></li>
  21.         <li>ϸ˵֡</li>
  22.     </ul>
  23. </div>
ƴ


float⣨Set a Float to Fix a Float


˷ͨҳĶ󣬵Կķʵ֡
ϣҲΪôͻӦаĸԪء
ԣĴֻҪ׷һУliĸԪ׷һfloat


  1. #container, #container ul {
  2.         width: 500px;
  3.         float: left;
  4.     }
ƴ



Ĵ£
  1. <style>
  2.     li {
  3.         list-style: none;
  4.     }
  5.     img {
  6.         float: left;
  7.     }
  8.     #container, #container ul {
  9.         width: 500px;
  10.         float: left;
  11.     }
  12. </style>
  13. <div id="container">
  14.     <ul>
  15.         <li><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100" alt=""></li>
  16.         <li></li>
  17.         <li>ϸ˵֡</li>
  18.     </ul>
  19.     <ul>
  20.         <li><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100" alt=""></li>
  21.         <li></li>
  22.         <li>ϸ˵֡</li>
  23.     </ul>
  24. </div>
ƴ


ʹoverflowԵġSimple Clearing of Floats


˷һһoverflowԣڲκθԪء

ԴҲֻҪһмɡ


  1. #container, #container ul {
  2.         width: 500px;
  3.         overflow: hidden;
  4.     }
ƴ


Ч͵һֵЧһ
  1. <style>
  2.     li {
  3.         list-style: none;
  4.     }
  5.     img {
  6.         float: left;
  7.     }
  8.     #container, #container ul {
  9.         width: 500px;
  10.         overflow: hidden;
  11.     }
  12. </style>
  13. <div id="container">
  14.     <ul>
  15.         <li><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100" alt=""></li>
  16.         <li></li>
  17.         <li>ϸ˵֡</li>
  18.     </ul>
  19.     <ul>
  20.         <li><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100" alt=""></li>
  21.         <li></li>
  22.         <li>ϸ˵֡</li>
  23.     </ul>
  24. </div>
ƴ


ʹɵݵġEasy Clearing

dzͨCSSе:afterαԪأڸĺһclear:bothеĸȻ󽫸
Ҫ׷ӵĴӣ


  1. #container ul:after {
  2.         content: ".";
  3.         display: block;
  4.         height: 0;
  5.         clear: both;
  6.         visibility: hidden;
  7.     }
ƴ


Ч£


  1. <style>
  2.     li {
  3.         list-style: none;
  4.     }
  5.     img {
  6.         float: left;
  7.     }
  8.     #container, #container ul {
  9.         width: 500px;
  10.     }
  11.     #container ul:after {
  12.         content: ".";
  13.         display: block;
  14.         height: 0;
  15.         clear: both;
  16.         visibility: hidden;
  17.     }
  18. </style>
  19. <div id="container">
  20.     <ul>
  21.         <li><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100" alt=""></li>
  22.         <li></li>
  23.         <li>ϸ˵֡</li>
  24.     </ul>
  25.     <ul>
  26.         <li><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100" alt=""></li>
  27.         <li></li>
  28.         <li>ϸ˵֡</li>
  29.     </ul>
  30. </div>
ƴ


ܽһ

ûжԴֻ֣֮Ƿʺϵһǵȱ㣬ȻλжһַʺԼ
һ
ŵ㣺׶ʵַ򵥣Կ
ȱ㣺Ҫǰ᣺ȣĿȣͿڴֱ϶ѷţΣԤڸǰҪʾݣΪܻҪӶѭ

ڶ
ŵ㣺͵һֲ
ȱ㣺Ƕ֪overflow:hiddenʱݽأַʱһҪݵĶкܺõԤ


ŵ㣺ͨ:afterαʵ֣ǰֵȱ㶼Ҫġ
ȱ㣺ļԣIE6Dz֧ġ

л

иɻWeb(Bulletproof Web Design)ߡDan Cederholm ¾
ĵĹ۵㶼ɸܽó

޶, ͼƬ, ǩ, , ռ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
fhuj3d96 2017-2-12 11:30:29
| ʾȫ¥
2F
Ժעˡ ¥
õװι˾             http://www.wmtdl.com/
й֤         http://www.rlhlt.com/
CCC֤         http://www.rlhlt.com/
Ȩϵ֤         http://www.rlhlt.com/
人CCC֤         http://www.rlhlt.com/
CCC֤         http://www.rlhlt.com/
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2017-3-28 06:15

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б