鱼C论坛

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

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

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

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

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

x
<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            *{
                padding:0;
                margin:0;
            }
            .box1{
                width:1210px;
                height:453px;
                background-color:red;
            }
            .box2{
                display:inline-block;
                width:431px;
                height:453px;
                background-color:aqua;
            }
            .box3{
                display:inline-block;
                width:750px;
                height:453px;
                background-color:gray;
            }
        </style>
    </head>
    <body>
    <div class="box1">
        <div class="box2">
        <img src="/图片/zuo.png" alt="#" vspace="40" hspace="60">
         咖啡是世界三大饮料之一,是用经过烘焙的咖啡豆制作出来的饮料,与可可、茶同为流行于世界的主要饮品。
            咖啡树是属茜草科常
            乔木,日常饮用的咖啡是用咖啡豆配合各种不同的烹
            煮器具制作出来. 
       </div>
       <div class="box3">
       <img src="/web开发期末作业/psd/you.png"  vspace="140" hspace="50" alt="#">
        咖啡起源   
            咖啡树是属茜草科常乔木,日常饮用的咖啡是用咖啡豆配合各种不同的烹煮器具制作出来的,而咖啡豆就是指咖啡树果实里面的果仁,再用适当的方法烘焙而成,一杯标准的咖啡品尝起来的味道不应该是苦涩的,一名合格的咖啡师在制作咖啡时会严谨地进行每一步操作,最后为客人呈上
            的咖啡在味觉上会呈现出不同程度的甜度、酸度、醇厚度或是干净度。
         </div>
    </div>
    </body>
</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标签属性的文档就会发现他也不推荐
var ar='ojkjkjkosas',j=0;
        while( ar.indexOf('0',j) !==-1 ){
                console.log( ar.indexOf('o') );
                j++;
        }
        console.log('o出现的次数'+j);

如何正确解决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-12-22 17:18

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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