请问下大家一个困扰我很久的问题

qingwadaxia_1 2018-02-25 03:57:56

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<title>Document</title>
<style>
html{zoom:1;}
*{margin:0;padding:0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{font-family:"微软雅黑","宋体";color:#000;height:100000px;}
pre,input,textarea,a,select{word-wrap:break-word;}
img{border:none;}
a{color: #5D5B5B;text-decoration:none;}
input,img{vertical-align:middle;}/*对齐*/
li{list-style:none;}
.rexingongyi{width:98%;margin:0 auto;margin-top:10px;}
.rexingongyi_left{width:46%;float:left;}
.rexingongyi_left img{width:100%;}
.rexingongyi_right{width:52%;float:right;color: #414141;font-size:12px;text-indent:2em;}
.rexingongyi_right a{ color: #F00;}
</style>
</head>
<body>
<div class="rexingongyi">
<div class="rexingongyi_left">
<img src="http://www.ncwseo.com//uploads/3.jpg">
</div>
<div class="rexingongyi_right">
<p>人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人。<a href="#" target="_blank">【详细】</a></p>
</div>

</div>
</body>
</html>

上面是一个左边图片右边文字的排版效果，我想让文字和图片的高度无论在什么屏幕尺寸下高度始终保持一致，这种类型的效果老是写不好，探测屏幕宽度的写法要写好多好多感觉特别费劲求大神解惑

...全文

816 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

qingwadaxia_1 2018-03-02

打赏
举报

引用 2 楼 qq_35269473 的回复:

.rexingongyi{ width:80vw;//假设值 } .rexingongyi_left{ width:40vw;float:left; } .rexingongyi_left img{ width:100%; } .rexingongyi_right{ width:38vw; font-size:4vw; line-height:5.56vw;//根据图片高宽比例 d 乘以图片宽度 50vw 得出图片高度再除以文字行数 l 得出: d * 50 / l =5.56vw }

请问图片高宽比例 d 是不是图片原始尺寸的高度

自渡96 2018-03-01

打赏
举报

图片宽度和字体大小用vw单位

qq_35269473 2018-02-27

打赏
举报

.rexingongyi{ width:80vw;//假设值 } .rexingongyi_left{ width:40vw;float:left; } .rexingongyi_left img{ width:100%; } .rexingongyi_right{ width:38vw; font-size:4vw; line-height:5.56vw;//根据图片高宽比例 d 乘以图片宽度 50vw 得出图片高度再除以文字行数 l 得出: d * 50 / l =5.56vw }