suchen

Heim >Web-Frontend >HTML-Tutorial >DIV 列表居中排列 并自适应屏幕宽度的CSS_html/css_WEB-ITnose

DIV 列表居中排列 并自适应屏幕宽度的CSS_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:32:291153Durchsuche

假设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

In Verbindung stehende Artikel

Mehr sehen