87,993
社区成员
发帖
与我相关
我的任务
分享一直困扰的问题 求大神解答
每次在写网页的时候， 遇到图片和文字并排显示的效果 就头痛 至今没什么比较好的解决方式
我想让图文和 文字 在任意尺寸的设备都自适应 保持高度一致 而不会像上面图片中那样 多出一部分 或者少了一部分
请问如何写
图片原始尺寸是190*140
文字是：我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问....
求大神解答 如果涉及到计算 麻烦解释下 计算方式
我想让图文和 文字 在任意尺寸的设备都自适应 保持高度一致 而不会像上面图片中那样 多出一部分 或者少了一部分
请问如何写
图片原始尺寸是190*140
文字是：我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问我问问....
求大神解答 如果涉及到计算 麻烦解释下 计算方式
...全文
请发表友善的回复…
发表回复
qingwadaxia_1 2018-06-13
- 打赏
- 举报
这是我见过最靠谱的了。大神 不知道您平时工作有没有接触这种比较低端的情况。 如果有的话 您一般是采用什么方式解决图文并排 这种情况的
ambit_tsai-微信 2018-06-12
- 打赏
- 举报
窃以为图片与文字的包裹元素要设置为固定高度，然后overflow:hidden。
文字可以加个text-overflow:ellipsis，让它超过的时候显示省略号。
qingwadaxia_1 2018-06-12
- 打赏
- 举报
这个其实感觉还是不怎么完美[/quote]
你理解错了，我提供的是思路，不是最终答案
我这个博客的效果，本来也不是你描述的效果
自己思考来的，才是最好的，不要一味的等着别人给最终答案[/quote]谢谢
qingwadaxia_1 2018-06-12
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Document</title>
<style>
*{padding:0;margin:0;}
html{zoom:1;}
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:14px "微软雅黑","宋体";color:#000;background:#fff;max-width:414px;margin:0 auto;}
pre,input,textarea,a,select{font:14px/1.6em "微软雅黑","宋体";color:#000;word-wrap:break-word;outline-width:inherit;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
img{border:none;}
a{color:#003399;font-weight:normal;text-decoration:none;}
input,img{vertical-align:middle;}/*对齐*/
li{list-style:none;}
img{width:100%;}
.tuwen{width: 96%;margin: 0 auto;margin-top: 15px;}
.tuwen_left{float:left;margin-right: 2%;}
.tuwen_left img{width:auto;height:20px;}
.tuwen_right{float:right;width:58%;}
.height20{height:20px;}
.tuwen_right p:nth-child(1){text-align:center;height:22px;line-height:22px;}
.tuwen_right p:nth-child(1) a{font-size:14px;color:#232323;}
</style>
</head>
<body>
<div class="tuwen">
<div class="tuwen_left"><img id="aa" src="images/aa.jpg"></div>
<div class="tuwen_right" id="cc">
<p>吾问无为谓吾问无为</p>
<p>吾问无为谓吾问无为谓吾问无为谓呜呜呜呜呜呜呜呜呜呜呜呜吾问无为谓呜呜呜呜呜呜呜呜....</p>
</div>
</div>
<script>
var aa = document.getElementById("aa");
var cc = document.getElementById("cc");
var ah = aa.offsetHeight;
var ch = cc.offsetHeight;
if(ah!=ch){
}
</script>
</body>
</html>
麻烦您有空帮忙看下具体怎么写
丰云 2018-06-12
- 打赏
- 举报
这个其实感觉还是不怎么完美[/quote]
你理解错了，我提供的是思路，不是最终答案
我这个博客的效果，本来也不是你描述的效果
自己思考来的，才是最好的，不要一味的等着别人给最终答案
天际的海浪 2018-06-12
- 打赏
- 举报
可以这样做
图片初始时设置高度为一行文字的高度，宽度为auto
用js循环判断：图片高度<文字的总高度，则图片高度增加一行文字的高度
qingwadaxia_1 2018-06-12
- 打赏
- 举报
求大神帮忙解答
qingwadaxia_1 2018-06-12
- 打赏
- 举报
这个其实感觉还是不怎么完美
qingwadaxia_1 2018-06-12
- 打赏
- 举报
会遇到文字比图片短的情况 在一些更高尺寸的设备里
天际的海浪 2018-06-12
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Document</title>
<style>
*{padding:0;margin:0;}
html{zoom:1;}
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:14px "微软雅黑","宋体";color:#000;background:#fff;max-width:414px;margin:0 auto;}
pre,input,textarea,a,select{font:14px/1.6em "微软雅黑","宋体";color:#000;word-wrap:break-word;outline-width:inherit;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
img{border:none;}
a{color:#003399;font-weight:normal;text-decoration:none;}
input,img{vertical-align:middle;}/*对齐*/
li{list-style:none;}
img{width:100%;}
.tuwen{width: 96%;margin: 0 auto;margin-top: 15px;}
.tuwen_left{float:left;margin-right: 2%;}
.tuwen_left img{width:auto;height:20px;}
.tuwen_right{line-height:20px;}
</style>
</head>
<body>
<div class="tuwen">
<div class="tuwen_left"><img id="aa" src="https://avatar.csdn.net/5/6/7/2_jslang.jpg"></div>
<div class="tuwen_right" id="cc">
<p>吾问无为谓吾问无为</p>
<p>吾问无为谓吾问无为谓吾问无为谓呜呜呜呜呜呜呜呜呜呜呜呜吾问无为谓呜呜呜呜呜呜呜呜....</p>
</div>
</div>
<script>
window.onload = window.onresize = function () {
var aa = document.getElementById("aa");
var cc = document.getElementById("cc");
aa.style.height = "20px";
while (aa.offsetHeight<cc.offsetHeight) {
aa.style.height = aa.offsetHeight+20+"px";
}
}
</script>
</body>
</html>
囧 2018-06-11
- 打赏
- 举报
设置和图片同样高度，超出隐藏
height:140px;
overflow:hidden;
丰云 2018-06-11
- 打赏
- 举报
