Heim > Artikel > Web-Frontend > DIV 列表居中排列 并自适应屏幕宽度的CSS_html/css_WEB-ITnose
DIV 列表居中排列 并自适应屏幕宽度的CSS_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:32:291070Durchsuche
假设DIV区域是宽高是100px 个数有几十个
我想让他
随着屏幕宽度自适应显示每行的个数，
并且每行的DIV列表都居中对齐，
左右距离相等
求CSS代码
回复讨论(解决方案)
并且每行的DIV列表都居中对齐，
这个是很难做到的，我能想到的方法是用js来做
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Swapping Songs</title><style type="text/css">.main {margin:0 auto}.main .nav {width:100px; border:1px solid #ddd;height: 40px; display: inline-table; margin-bottom:4px;}</style></head><body><div class="main"> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div> <div class="nav"></div></div></body></html>
body{width:100%;text-align:center;}div{ width:100px;height:100px;display:inline-block;}
.main {margin:0 auto; text-align:center; }
.nav {width:100px; border:1px solid #ddd;height: 40px; display:inline-block; margin-bottom:4px;}
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：深入CSS，让网页开发少点“坑”_html/css_WEB-ITnoseNächster Artikel：@font-face字体加载不成功，求解！_html/css_WEB-ITnose