Last active
May 11, 2016 02:13
-
-
Save naturallucky/12915a2008c1f218d38fd118e3e7fb17 to your computer and use it in GitHub Desktop.
simple card layout css (essence)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .card{ | |
| word-wrap:break-word; | |
| float:left; | |
| overflow: hidden; | |
| width:120px; | |
| height:200px; | |
| margin:10px; | |
| padding:10px; | |
| background-color:#f5f5f5; | |
| } | |
| @media screen and (max-width: 360px) { | |
| .card { width: 80px; } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="outline-wrap" | |
| style="min-width:200px; background:#eef; padding:5px; margin:5px;"> | |
| <div class="card"> | |
| 1jjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjj | |
| kkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkk | |
| mmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmm@ | |
| </div> | |
| <div class="card"> | |
| 2jjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjj | |
| kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk | |
| nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@ | |
| kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk | |
| nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@ | |
| </div> | |
| <div class="card"> | |
| 3jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj | |
| kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk | |
| pppppppppppppppppppppp ppppppppppppppppppp@ | |
| </div> | |
| <div class="card"> | |
| 4jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj | |
| kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk | |
| pppppppppppppppppppppp ppppppppppppppppppp@ | |
| kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk | |
| nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@ | |
| kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk | |
| nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@ | |
| </div> | |
| <div class="card"> | |
| 5jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj | |
| kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk | |
| pppppppppppppppppppppp ppppppppppppppppppp@ | |
| </div> | |
| <div class="card"> | |
| 6jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj | |
| kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk | |
| pppppppppppppppppppppp ppppppppppppppppppp@ | |
| kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk | |
| nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@ | |
| </div> | |
| <div class="card"> | |
| 7jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj | |
| kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk | |
| pppppppppppppppppppppp ppppppppppppppppppp@ | |
| </div> | |
| <div class="card"> | |
| 8jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj | |
| kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk | |
| pppppppppppppppppppppp ppppppppppppppppppp@ | |
| kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk | |
| nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@ | |
| </div> | |
| <br clear="all" /> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
explain & moving sample
http://edutainment-fun.com/hidemaru/it/css%E3%81%A7%E3%82%AB%E3%83%BC%E3%83%89%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%8C%E3%81%A9%E3%81%93%E3%81%BE%E3%81%A7%E5%87%BA%E6%9D%A5%E3%82%8B%E3%81%8B%E8%A9%A6%E3%81%97%E3%81%A6_2433.html