求教大神一个布局问题_html/css_WEB-ITnose-tutoriel HTML-php.cn

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

WBOY

Libérer： 2016-06-24 11:43:57

original

956 Les gens l'ont consulté

<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>

Copier après la connexion

上面代码，想让里面的图片一直处于锤直居中，但是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>

Copier après la connexion

<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>

Copier après la connexion