鱼C论坛

 找回密码
 立即注册
查看: 2339|回复: 15

[已解决]为何两个盒子,右边那个盒子会掉下来,离顶部有距离,明明空间够了。

[复制链接]
发表于 2022-3-12 11:09:41 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title></title>
  5.         <meta charset="utf-8">
  6.         <style>
  7.             *{
  8.                 padding:0;
  9.                 margin:0;
  10.             }
  11.             .box1{
  12.                 width:1210px;
  13.                 height:453px;
  14.                 background-color:red;
  15.             }
  16.             .box2{
  17.                 display:inline-block;
  18.                 width:431px;
  19.                 height:453px;
  20.                 background-color:aqua;
  21.             }
  22.             .box3{
  23.                 display:inline-block;
  24.                 width:750px;
  25.                 height:453px;
  26.                 background-color:gray;
  27.             }
  28.         </style>
  29.     </head>
  30.     <body>
  31.     <div class="box1">
  32.         <div class="box2">
  33.         <img src="/图片/zuo.png" alt="#" vspace="40" hspace="60">
  34.          咖啡是世界三大饮料之一,是用经过烘焙的咖啡豆制作出来的饮料,与可可、茶同为流行于世界的主要饮品。
  35.             咖啡树是属茜草科常
  36.             乔木,日常饮用的咖啡是用咖啡豆配合各种不同的烹
  37.             煮器具制作出来.
  38.        </div>
  39.        <div class="box3">
  40.        <img src="/web开发期末作业/psd/you.png"  vspace="140" hspace="50" alt="#">
  41.         咖啡起源   
  42.             咖啡树是属茜草科常乔木,日常饮用的咖啡是用咖啡豆配合各种不同的烹煮器具制作出来的,而咖啡豆就是指咖啡树果实里面的果仁,再用适当的方法烘焙而成,一杯标准的咖啡品尝起来的味道不应该是苦涩的,一名合格的咖啡师在制作咖啡时会严谨地进行每一步操作,最后为客人呈上
  43.             的咖啡在味觉上会呈现出不同程度的甜度、酸度、醇厚度或是干净度。
  44.          </div>
  45.     </div>
  46.     </body>
  47. </html>
复制代码
最佳答案
2022-3-13 14:22:09
img标签不推荐使用vspan和hspan属性。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-3-12 11:16:13 | 显示全部楼层
没有问题吧
9.PNG
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2022-3-12 12:10:01 | 显示全部楼层

我这不是这效果,我的插了图片,右边那个会下移一小段距离,
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2022-3-12 12:16:46 | 显示全部楼层

咋发图片啊,教下我,我发给你看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2022-3-12 12:19:10 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2022-3-12 13:15:13 | 显示全部楼层
isdkz 发表于 2022-3-12 12:19
https://fishc.com.cn/thread-168190-1-1.html


                               
登录/注册后可看大图


就是这效果。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2022-3-12 13:17:36 | 显示全部楼层

https://s1.ax1x.com/2022/03/12/bTXZQA.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2022-3-12 13:18:16 | 显示全部楼层
isdkz 发表于 2022-3-12 12:19
https://fishc.com.cn/thread-168190-1-1.html

https://s1.ax1x.com/2022/03/12/bTXZQA.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2022-3-12 14:59:00 | 显示全部楼层
isdkz 发表于 2022-3-12 12:19
https://fishc.com.cn/thread-168190-1-1.html

[img=1000px,1000px]https://imgtu.com/i/b7V0k4[/img


真的效果是这样的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2022-3-12 15:02:45 | 显示全部楼层
isdkz 发表于 2022-3-12 12:19
https://fishc.com.cn/thread-168190-1-1.html


                               
登录/注册后可看大图

但我做出来右边那个盒子掉下来了一点
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2022-3-12 15:04:08 | 显示全部楼层
isdkz 发表于 2022-3-12 12:19
https://fishc.com.cn/thread-168190-1-1.html

https://s1.ax1x.com/2022/03/12/bTXZQA.png

这是我做的错误的效果,右边掉下来了,不知道哪里问题。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2022-3-13 14:22:09 | 显示全部楼层    本楼为最佳答案   
img标签不推荐使用vspan和hspan属性。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2022-3-13 17:54:01 | 显示全部楼层
_帅 发表于 2022-3-13 14:22
img标签不推荐使用vspan和hspan属性。

为啥不太推荐啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2022-3-15 19:49:28 | 显示全部楼层
这个。。。 你阅读一下W3C关于img标签属性的文档就会发现他也不推荐
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2022-3-27 10:17:26 | 显示全部楼层
_帅 发表于 2022-3-15 19:49
这个。。。 你阅读一下W3C关于img标签属性的文档就会发现他也不推荐
  1. var ar='ojkjkjkosas',j=0;
  2.         while( ar.indexOf('0',j) !==-1 ){
  3.                 console.log( ar.indexOf('o') );
  4.                 j++;
  5.         }
  6.         console.log('o出现的次数'+j);

  7. 如何正确解决o位子和次数输出,
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2022-3-28 21:24:58 | 显示全部楼层

你写的方法问题:每一次循环的时候都是从 j 的值为下标开始查找的,所以,当j=8的时候找不到了。

方法1,对象遍历:
Object.keys(ar).forEach(key => {
    if (ar[key] === 'o') {
         j++
         console.log(key) // 打印结果:0, 7
    }
})
console.log(j) //打印结果:2

方法2,拆成数组再遍历:
ar.split('').forEach((item,index) => {
   if (item === 'o') {
       j++
       console.log(index)  // 打印结果:0,7
   }
})
console.log(j)   // 打印结果:2
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-6 14:02

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表