大佬教程收集整理的这篇文章主要介绍了css – div占据的奇怪位置,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML:
<div id="footer"> <div class="content"> <div id="info1"> <img src="img/temp.png" alt="About me" /> <h4>About Me</h4> <p>this is about me section</br>and this is the other line</br>and this is a third line</p> </div> <div id="info2"> <h4>Random Photos</h4> <div id="randomPhotos"></div> </div> <div id="info3"> <h3>Follow Me</h3> <div> <img src="img/temp.png" alt="facebook" /><a href="#">Facebook</a> </div> <div> <img src="img/temp.png" alt="twitter" /><a href="#">Twitter</a> </div> <div> <img src="img/temp.png" alt="email" /><a href="#">E-mail</a> </div> </div> </div> </div>
CSS:
#info1,#info2,#info3 { padding: 10px; display:inline-block; } #info1 { width:20%; } #info1 img { margin-right:3px; width:20px; height:20px; BACkground-image:url('../img/glyphicons-halflings.png'); BACkground-repeat:no-repeat; BACkground-position:-162px 1px; } #info1 img,#info1 h4 { display:inline-block; } #info2 { width:55%; border-left:1px solid gray; border-right : 1px solid gray; } #info3 { width:15%; } #info3 img { width:20px; height:20px; margin-right:5px; } #info3 img[alt="facebook"] { BACkground : url('../img/result.png') no-repeat 0px -30px; } #info3 img[alt="twitter"] { BACkground : url('../img/result.png') no-repeat 0px -60px; } #info3 img[alt="email"] { BACkground : url('../img/result.png') no-repeat 0px 0px; } #info2 div { padding:3px; } #randomPhotos { height : 100px; }
我真的不擅长CSS,所以它可能是一个小问题.我只是找不到它.
这就是你所看到的原因,你的每个信息div都与基线对齐.由于中央div的高度较小,因此您可以在顶部看到间隙.
要解决这个问题:
#info1,#info3 { padding: 10px; display:inline-block; vertical-align:top; }
您可能遇到的第二个问题是,现在它对齐顶部,底部有一个“间隙”,没有左边框或右边框.要么由全高度divs管理边框,要么使所有div具有相同的高度.
以上是大佬教程为你收集整理的css – div占据的奇怪位置全部内容,希望文章能够帮你解决css – div占据的奇怪位置所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。