61,112
社区成员
发帖
与我相关
我的任务
分享求改个css样式，使图片居左，文字居右
<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>
这是CSS中的图片求高手帮忙改一下样式。使图片居左，文字在图片右侧按照比例垂直居中，当文字超出自动换行。
...全文
请发表友善的回复…
发表回复
西門冠希 2018-11-06
- 打赏
- 举报
谢谢！
方_糖 2018-11-06
- 打赏
- 举报
你看一下你的文字div，他的宽度这么大，但是他的父代div的宽度也就400px ,怎么可能挤得上去呢
如果你想用这样生挤下去的话可以用position,这样的话，会导致文字和图片重叠
所以你既然用了float,那么你只要改变第二个div的宽度到合适就可以了，还有呀，要把图片div记得float:left。
修改后的样子：（我随便调了一下，具体宽高，margin,padding自己修改吧）
附上代码
<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{float:left;width:46px; height:46px; background:url(ts_bg.png) no-repeat center 0; margin:20px 30px 30px 20px; float:left}
.introduce-r{float:left;width:300px;margin-top:20px;}
.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>
