大佬教程收集整理的这篇文章主要介绍了HTML – 灵活的缩略图网格与CSS，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html> <html> <head> <title>Test rows</title> <style type="text/css"> body { BACkground: #121212; color: #fff; } #Container { BACkground: #585858; margin: 0 auto; min-width: 1024px; width: 85%; margin-top: 50px; text-align: justify; -ms-text-justify: diStribute-all-lines; text-justify: diStribute-all-lines; } #Container a { vertical-align: top; display: inline-block; *display: inline; zoom: 1; } .stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0; } </style> </head> <body> <div id="Container"> <a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> <a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> <a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> <a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> <a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> <a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> <a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> <a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> <a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> <a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> <a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> <a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> <span class="stretch"></span> </div> </body> </html>
我在stackoverflow中做了一些研究,发现了一些有用的代码,但是我遇到了一些问题.我希望图像从左到右对齐,而不是“捕捉”到容器的boders,因为当你看到图像时,我在最后一行中的图像较少.
另外我想让行之间的“垂直空间”等于图像之间的水平间距,现在我有一些像“3px”那样的垂直间距,我不知道从哪里来.如果需要,我会向js解决方案开放.谢谢
这是基于here on SO提供的答案,我建议你阅读,以及this one-也是基于它.这证明了儿童要素的合理性.
HTML
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<span class="stretch"></span>
</div>
CSS
#container { text-align: justify; -ms-text-justify: diStribute-all-lines; text-justify: diStribute-all-lines; /* just for demo */ } .box { width: 150px; height: 125px; BACkground:#ccc; vertical-align: top; display: inline-block; *display: inline; margin:10px; zoom: 1 } .stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0 }
或者,如果不是儿童物品被对齐,而是希望他们从左到右对齐,请看this fiddle,基于this answer on SO
HTML
<div class="container"> <div>Box1</div> <div>Box2</div> <div>Box3</div> <div>Box4</div> <div>Box5</div> <div>Box6</div> <div>Box7</div> <div>Box8</div> <div>Box9</div> <div>Box10</div> <div>Box11</div> </div>
CSS
* { margin: 0; padding: 0; } .container { overflow: auto; display: block; } .container > div { margin: 20px; width: 150px; height: 100px; BACkground: blue; float: left; color: #fff; text-align: center; }
以上是大佬教程为你收集整理的HTML – 灵活的缩略图网格与CSS全部内容，希望文章能够帮你解决HTML – 灵活的缩略图网格与CSS所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。