吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 1123|回复: 11
收起左侧

[已解决] CSS定位求助

[复制链接]
Ldfd 发表于 2021-1-21 15:49
本帖最后由 Ldfd 于 2021-1-21 16:47 编辑

网页中央是一张图片
如何实现在图片左下角放置按钮

类似这样,前端纯小白

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

poong 发表于 2021-1-21 15:53
你是要图片下面放 按钮?
 楼主| Ldfd 发表于 2021-1-21 15:54
知心 发表于 2021-1-21 15:56
不是很明白你要的效果,可以把图片和按钮用一个容器包起来,然后正常布局就可以吧。或者你说的这个效果有没有别人使用到了,可以放一下示例网址
kindiaing 发表于 2021-1-21 16:00
本帖最后由 kindiaing 于 2021-1-22 14:29 编辑

在图片和按钮中间加一行代码就可以了,清除浮动的。
<div style="clear:both;"></div>

在图片和按钮中间加一行代码就可以了,清除浮动的。

<div style="clear:both;"></div>

你这个问的也太基础了,找个课程学习下HTML和CSS吧,一周就可以上手了。以下是完整代码,你可以删除11行代码,然后对比下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2665572900,3180636832&fm=26&gp=0.jpg" alt="">
        <div style="clear:both;"></div>
        <input type="button" value="按钮">
        <input type="button" value="按钮">
        <input type="button" value="按钮">
        <input type="button" value="按钮">
    </div>
</body>
</html>


等你学会了定位和边距,position,margin,padding就可以随意布局了。
 楼主| Ldfd 发表于 2021-1-21 16:01
知心 发表于 2021-1-21 15:56
不是很明白你要的效果,可以把图片和按钮用一个容器包起来,然后正常布局就可以吧。或者你说的这个效果有没 ...

没看到这么布局的,按钮在左上角,图片在中央,已经在同一个div中,不知道如何相对图片定位
kenkuuga 发表于 2021-1-21 16:04
本帖最后由 kenkuuga 于 2021-1-21 16:21 编辑

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
</head>
<body style="margin: 0;padding: 0;width: auto;">
<div style="position:relative;text-align: center;">
    <img style="position: relative;" src="https://i.loli.net/2020/04/14/VgO2Kk1nufAlea4.gif">
    <div style="margin:0 auto;bottom:0px;left:-50%;" ><button style="width: 80px;height: 50px;" value="按钮1"></button><button style="width: 80px;height: 50px;margin-left: 20px;"  value="按钮2"></button><button style="width: 80px;height: 50px;margin-left: 20px"  value="按钮3"></button><button style="width: 80px;height: 50px;margin-left: 20px"  value="按钮4"></button></div>
</div>
<div style="position:relative">
<img style="position: relative;" src="https://i.loli.net/2020/04/14/VgO2Kk1nufAlea4.gif">
<div style="position:absolute;bottom:0px;left:0px;" ><button style="width: 100px;height: 50px;margin-left: 20px" value="按钮1"></button><button style="width: 100px;height: 50px;margin-left: 20px;"  value="按钮2"></button><button style="width: 100px;height: 50px;margin-left: 20px"  value="按钮3"></button></div>
</div>
</body>

免费评分

参与人数 1吾爱币 +2 收起 理由
Ldfd + 2 谢谢@Thanks!

查看全部评分

 楼主| Ldfd 发表于 2021-1-21 16:08
kindiaing 发表于 2021-1-21 16:00
在图片和按钮中间加一行代码就可以了,清除浮动的。

然后还能让图片居中吗?(有时间确实该学学
无常方便面 发表于 2021-1-21 16:12
父级元素相对定位,子级绝对定位
心病 发表于 2021-1-21 16:14
A要在B上定位,A就用absolute,B就用relative,如果是图片下面放4个按钮的话,完全不需要定位吧。。。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-26 04:28

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

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