Please give me some advice on a layout problem_html/css

Please give me some advice on a layout problem_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:57

Original

965 people have browsed it

<div style="background: #008b8b; float: left;">        <div style="width: 200px; float: left; background: #CCC;  text-align: center;">            <img style="width: 90%;position: absolute; top: 50%;" src="15.jpg" />        </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>

Copy after login

The above code wants the image inside to be always straight and centered, but the DIV has no height and will automatically be raised according to the content on the right (such as

Reply to discussion (solution)

Is this probably it? If not, please send a rough rendering

<!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="width:50px;height:50px;" src="http://static.cnbetacdn.com/thumb/article/2015/0522/7123851075baf53.png_600x600.png" />        </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>

Copy after login

<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" />	</div>	<div style="width:200px;background:#00bfff;margin-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>		<p>p</p>		<p>p</p>		<p>p</p>		<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>

Copy after login