Last active
July 31, 2017 04:12
-
-
Save hoangbits/3643cc01955a3dc7188924473acdee1c to your computer and use it in GitHub Desktop.
css box-sizing
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel='stylesheet' type='text/css' href='style.css'> | |
| </head> | |
| <body> | |
| <h1 class="title">My App </h1> | |
| <div class="app"> | |
| <div class='screenshot'>image</div> | |
| <div class='description'>In ac ipsum quis turpis adipiscing commodo. <em>Mauris fermentum quam</em> in risus eleifend fringilla. Aliquam placerat, | |
| ipsum sit amet cursus rhoncus, augue mi tincidunt erat, et consequat velit massa a velit. Cras eleifend lectus | |
| nec diam ornare, eu placerat mi ultricies. Etiam tempor iaculis feugiat. Ut tincidunt tempus libero non convallis. | |
| Morbi consequat eros eget elit porta porta. Curabitur placerat eros dui, vitae lobortis sapien laoreet ac. Maecenas | |
| a lacus diam. Morbi ante lectus, ornare sed suscipit at, tempus elementum purus. Suspendisse sodales hendrerit | |
| pharetra. Integer odio risus, convallis eu egestas ad, venatis nec leo. ac ipsum quis turpis adipiscing commodo. | |
| <em>Mauris fermentum quam</em> in risus eleifend fringilla. <a href="#">Aliquam placerat</a>, ipsum sit amet | |
| cursus rhoncus, augue mi tincidunt erat, et consequat velit massa a velit. Cras eleifend lectus nec diam ornare, | |
| eu placerat mi ultricies. Etiam tempor iaculis feugiat. Ut tincidunt tempus libero non convallis. Morbi consequat | |
| eros eget elit porta porta. Curabitur placerat eros dui, vitae lobortis sapien laoreet ac. Maecenas a lacus diam. | |
| Morbi ante lectus, ornare sed suscipit at, tempus elementum purus. Suspendisse sodales hendrerit pharetra. Integer | |
| odio risus, convallis eu egestas ac, venenatis nec leo.</div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| .app { | |
| display: -webkit-flex; | |
| display: flex; | |
| } | |
| // .app to display 2 div child as element in row | |
| .screenshot { | |
| max-width: 450px; | |
| } | |
| .description { | |
| max-width: 705px; | |
| margin: 10px; | |
| padding: 12px; | |
| } | |
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| * { | |
| outline: 1px solid red !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment