html–div中的div

概述我有下一个HTML代码.ratings { border: 1px solid #CCC; overflow: visible; padding: 10px; position: relative; width: 100%; height: 100px; } .ratings_stars { background: url('/i

我有下一个HTML代码

.ratings {  border: 1px solID #CCC;  overflow: visible;  padding: 10px;  position: relative;  wIDth: 100%;  height: 100px;}.ratings_stars {  background: url('/images/rsz_star_icon_1.png') no-repeat;  float: left;  height: 28px;  padding: 2px;  wIDth: 32px;}.ratings_Vote {  background: url('star_Voted.png') no-repeat;}.ratings_over {  background: url('star_overs.png') no-repeat;}.total_Votes {  background: #eaeaea;  top: 58px;  left: 0;  padding: 5px;  position: absolute;}

我想让divs的图像响应……而且我希望所有常常的星星都在内联.我可以这样做吗？拥有相同的保证金并保持中心的星星图标最佳答案使用display：flex;并证明 – 内容：间隔;在父div上.如果您不希望它与图像一起居中,也可以将.total_Votes移出评级.

这样您就不必担心给他们保证金了.

.ratings {            border:     1px solID #CCC;            overflow:   visible;            padding:    10px;            position:   relative;            wIDth:      100%;            height:     100px;  display:flex;  align-items:center;  justify-content:space-between;          }.ratings_stars {            background: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg') no-repeat;            float:      left;            height:     28px;            padding:    2px;            wIDth:      32px;        }.ratings_Vote {            background: url('http://images.financialexpress.com/2015/12/Lead-image.jpg') no-repeat;        }.ratings_over {            background: url('http://images.financialexpress.com/2015/12/Lead-image.jpg') no-repeat;        }.total_Votes {      background: #eaeaea;      padding: 5px;  }

          总结       
以上是内存溢出为你收集整理的html  –  div中的div全部内容，希望文章能够帮你解决html  –  div中的div所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1118963.html