求教大神一个布局问题_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

回复讨论(解决方案)

집

웹 프론트엔드

HTML 튜토리얼

求教大神一个布局问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:43 AM

<div style="background: #008b8b; float: left;">        <div style="width: 200px; float: left; background: #CCC;  text-align: center;">            <img  src="/static/imghw/default1.png"  data-src="15.jpg"  class="lazy"    style="max-width:90%"  / 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  src="/static/imghw/default1.png"  data-src="http://static.cnbetacdn.com/thumb/article/2015/0522/7123851075baf53.png_600x600.png"  class="lazy"    style="max-width:90%"  / 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="/static/imghw/default1.png"  data-src="http://static.cnbetacdn.com/thumb/article/2015/0522/7123851075baf53.png_600x600.png"  class="lazy"   / 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으로 문의하세요.