<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>
）撑高。
大概是这个不？如果不是你还是发个大概的效果图吧
<!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>
