Home > Article > Web Front-end > 栅格布局的两种简单的实现方式_html/css_WEB-ITnose
栅格布局的两种简单的实现方式_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:48:371137browse
-
使用float：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> section { border: solid 1px; } section section { float: left; margin-left: 10px; margin-top: 10px; text-align: center; width: 200px; border-radius: 20px; height: 200px; } .parent { height: 440px; width: 660px; } .parent section:first-child { height: 410px; } </style></head><body> <section class="parent"> <section>A</section> <section>B</section> <section>C</section> <section>D</section> <section>E</section> </section></body></html> -
使用display：flex（这个css3属性仅谷歌和火狐支持）
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> section { border: solid 1px; } section section { margin-left: 10px; margin-top: 10px; text-align: center; width: 200px; border-radius: 20px; height: 200px; } .parent { display: flex; flex-direction: column; flex-wrap: wrap; height: 440px; width: 660px; } .parent section:first-child { height: 410px; } </style></head><body> <section class="parent"> <section>A</section> <section>B</section> <section>C</section> <section>D</section> <section>E</section> </section></body></html>
实现效果如图所示：
当然使用table和负边距也是可以实现的，有时间补上:-D
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css知多少（11）--position_html/css_WEB-ITnoseNext article：CSS3实现ToolTip效果_html/css_WEB-ITnose