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

WBOY
Freigeben: 2016-06-24 11:32:29
Original
1125 Leute haben es durchsucht

假设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>
Nach dem Login kopieren

body{width:100%;text-align:center;}div{ width:100px;height:100px;display:inline-block;}
Nach dem Login kopieren



.main {margin:0 auto; text-align:center; }
.nav {width:100px; border:1px solid #ddd;height: 40px; display:inline-block; margin-bottom:4px;}

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage