CSS定位求助

Ldfd 发表于 2021-1-21 15:49

本帖最后由 Ldfd 于 2021-1-21 16:47 编辑

网页中央是一张图片
如何实现在图片左下角放置按钮
https://tu.my/2021/01/21/58bab585060a4.png
类似这样，前端纯小白

poong 发表于 2021-1-21 15:53

你是要图片下面放按钮？

Ldfd 发表于 2021-1-21 15:54

poong 发表于 2021-1-21 15:53
你是要图片下面放按钮？

是的（字数补丁

知心发表于 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 编辑

<!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>

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个按钮的话，完全不需要定位吧。。。

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

CSS定位求助