求教大神一个布局问题_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:43:57951검색
<div style="background: #008b8b; float: left;"> <div style="width: 200px; float: left; background: #CCC; text-align: center;"> <img style="max-width:90%" src="15.jpg" / alt="求教大神一个布局问题_html/css_WEB-ITnose" > </div> <div style="width: 200px; float: left; background: #00bfff; left: 200px;"> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p><p>p</p><p>p</p><p>p</p><p>p</p> </div> </div>
上面代码，想让里面的图片一直处于锤直居中，但是DIV都是没有高度，会自动根据右边的内容（例如
）撑高。
回复讨论(解决方案)
大概是这个不？如果不是你还是发个大概的效果图吧
<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>图片测试</title></head> <body> <div style="background: red;float: left;"> <div style="width: 500px;float: right; background: #00bfff; left: 200px;"> <div style="float: left;margin: 50% 0;"> <img style="max-width:90%" src="http://static.cnbetacdn.com/thumb/article/2015/0522/7123851075baf53.png_600x600.png" / alt="求教大神一个布局问题_html/css_WEB-ITnose" > </div> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p><p>p</p><p>p</p><p>p</p><p>p</p> </div> </div> </body></html>
<style type="text/css">*{margin:0;padding:0;}div.img{width:200px;position:absolute;left:0;top:0;height:100%;background:#ccc;text-align:center;}div.img:after{content:'';display:inline-block;height:100%;width:0;font-size:0;vertical-align:middle;}div.img img{width:90%;vertical-align:middle;}</style><div style="background:#008b8b;position:relative;"> <div class="img"> <img src="http://static.cnbetacdn.com/thumb/article/2015/0522/7123851075baf53.png_600x600.png" / alt="求教大神一个布局问题_html/css_WEB-ITnose" > </div> <div style="max-width:90%"> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> </div></div> 성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.