小白求css高手改个样式，使图片居左，文字居右

西門冠希 2018-11-05 08:29:25



 <html>

<head>

<title>友情提示您！</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<meta name="renderer" content="webkit">

<meta http-equiv="Cache-Control" content="no-siteapp" /><base target='_self'/>

<link rel="shortcut icon" href="/favicon.ico" />

	<style>

html,body,h2,div,p,img{margin:0;padding:0;list-style:none;border:none;font-size:12px;}

a:link,a:visited,a:active{text-decoration:none;font-family:Tahoma,Geneva,sans-serif;}a:hover{text-decoration:underline;}

body{text-align:center;font-family:Tahoma,Geneva,sans-serif;background:#E0FFFF;background:#E0FFFF\9;padding-bottom:25px;_background:url(about:black) no-repeat fixed;}

html{_background:url(about:black) no-repeat fixed;}

.ts_div{width:500px;overflow:hidden;margin:0 auto;margin-top:30px;border:5px solid #E9E9E9;border-radius:3px;}

.ts_div h2{text-align:left;color:#666;border-bottom:1px dotted #ccc;padding-bottom:10px;font-size:12px;}

/*.ts_div p{line-height:70px;background:url(ts_bg.png) no-repeat 0 center;margin:10px auto;font-size:14px;text-align:left;text-indent:70px;}*/

.introduce-l{width:46px; height:46px; background:url(ts_bg.png) no-repeat; margin:20px 30px 30px 20px; float:left}

.introduce-r{float:right;}

.introduce-r h3{text-align:left;}

.ts_border{border:7px solid #efefef;}

.ts_b2{background:#fff;border:2px solid #E9E9E9;padding:10px 20px 10px 20px;}

.ts_tz{margin:10px auto;text-align:right;width:500px;color:#666;}

.ts_tz a{color:#f30;}

	</style></head>

<body leftmargin='0' topmargin='0' bgcolor='#FFFFFF'>

<center>

<script>

      var pgo=0;

      function JumpUrl(){

        if(pgo==0){ location='/i/?type=msg'; pgo=1; }

      }

document.write("<div class='ts_div'><div class='ts_border'><div class='ts_b2'>'<h2>友情提示您！</h2>");

document.write("<div class='introduce-l'></div>");

document.write("<div class='introduce-r'><h3>尊敬的用户您好，感谢您关注本站。您的反馈已经收到，稍后我们会对您做出回复。</h3></div>");

document.write("</div></div></div>");

document.write("<div class='ts_tz'><a href='/i/?type=msg'>正在转跳返回...</a></div>");

setTimeout('JumpUrl()',611000);</script>

</center>

</body>

</html>

引用

求高手帮忙改一下样式。使图片居左，文字在图片右侧按照比例垂直居中，当文字超出自动换行。

...全文

188 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

Logerlink 2018-11-06

打赏
举报

跑一下，看看帅不帅



 <html>

<head>

<title>友情提示您！</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<meta name="renderer" content="webkit">

<meta http-equiv="Cache-Control" content="no-siteapp" /><base target='_self'/>

<link rel="shortcut icon" href="/favicon.ico" />

    <style>

html,body,h2,div,p,img{margin:0;padding:0;list-style:none;border:none;font-size:12px;}

a:link,a:visited,a:active{text-decoration:none;font-family:Tahoma,Geneva,sans-serif;}a:hover{text-decoration:underline;}

body{text-align:center;font-family:Tahoma,Geneva,sans-serif;background:#E0FFFF;background:#E0FFFF\9;padding-bottom:25px;_background:url(about:black) no-repeat fixed;}

html{_background:url(about:black) no-repeat fixed;}

.ts_border h2{display:block; text-align:left;color:#666;border-bottom:1px dotted #ccc;padding-bottom:10px;font-size:12px;}

.ts_div{width:500px;overflow:hidden;margin:0 auto;margin-top:30px;border:5px solid #E9E9E9;border-radius:3px;}



/*.ts_div p{line-height:70px;background:url(ts_bg.png) no-repeat 0 center;margin:10px auto;font-size:14px;text-align:left;text-indent:70px;}*/

.introduce-l{flex: 0 0 22%; width:46px; height:100px; background:url(https://avatar.csdn.net/1/B/5/1_music_vip_2009.jpg) no-repeat; margin:20px 30px 30px 20px;}

.introduce-r{flex: 0 0 70%;}

.introduce-r h3{text-align:left;}

.ts_border{border:7px solid #efefef;background:#fff;border:2px solid #E9E9E9;padding:10px 20px 10px 20px;}

.ts_b2{display: flex; }

.ts_tz{margin:10px auto;text-align:right;width:500px;color:#666;}

.ts_tz a{color:#f30;}

    </style></head>

<body leftmargin='0' topmargin='0' bgcolor='#FFFFFF'>

<center>

<script>

      var pgo=0;

      function JumpUrl(){

        if(pgo==0){ location='/i/?type=msg'; pgo=1; }

      }

document.write("<div class='ts_div'><div class='ts_border'><h2>友情提示您！</h2><div class='ts_b2'>");

document.write("<div class='introduce-l'></div>");

document.write("<div class='introduce-r'><h3>尊敬的用户您好，感谢您关注本站。您的反馈已经收到，稍后我们会对您做出回复。</h3></div>");

document.write("</div></div></div>");

document.write("<div class='ts_tz'><a href='/i/?type=msg'>正在转跳返回...</a></div>");

setTimeout('JumpUrl()',611000);</script>

</center>

</body>

</html>