Home >Web Front-end >HTML Tutorial >Please give me some advice on a layout problem_html/css_WEB-ITnose
Please give me some advice on a layout problem_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:43:57983browse
<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>
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 e388a4556c0f65e1904146cc1a846bee).
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>
<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> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：6 CSS hamburger animations_html/css_WEB-ITnoseNext article：6 CSS hamburger animations_html/css_WEB-ITnose