Heim >Web-Frontend >HTML-Tutorial >求教大神一个布局问题_html/css_WEB-ITnose
求教大神一个布局问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:57951Durchsuche
<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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：6个CSS hamburger动画_html/css_WEB-ITnoseNächster Artikel：Jcrop裁减图片的问题_html/css_WEB-ITnose