各美其美的布局思路

马黑黑

有时候，可能需要使用好多元素在帖子中，这些元素，可能是东拼西凑的，若它们分别用于帖子的不同位置，更改相关算法一是复杂、麻烦，二是不一定成功。怎么办？

看下面的示意效果，也许你能明白什么：

区域一

区域二

区域三

马黑黑

将准备好的特效元素，用三个 class="wrapper" 的 div 约束起来，置于帖子需要的位置。每一个 wrapper 的位置不同，或还有其他属性不同，均可再添加对应选择器，用以重新规定，比如针对第二个 wrapper：

.wrapper:nth-of-type(2) { ... }

nth-of-type(n) 是前面选择器 .wrapper 的伪类，用于设定 class="wrapper" 的元素群第n个元素。

一楼效果的代码我放在下一楼，有兴趣的朋友可以琢磨一下。

马黑黑

一楼效果的代码

1. <style>
   
2. #papa {
   
3.         margin: 20px auto 0;
   
4.         width: 740px;
   
5.         height: 500px;
   
6.         background: rgb(0,100,120);
   
7.         position: relative;
   
8. }
   
9. .wrapper {
   
10.         position: absolute;
    
11.         /* 下面三句演示用 */
    
12.         border: 1px solid gray;
    
13.         display: grid;
    
14.         place-items: center;
    
15.         overflow: hidden;
    
16. }
    
17. .wrapper:nth-of-type(1) {
    
18.         width: 300px;
    
19.         height:260px;
    
20.         right: 10px;
    
21.         top: 50px;
    
22.         border-radius: 50%;
    
23. }
    
24. .wrapper:nth-of-type(2) {
    
25.         width: 200px;
    
26.         height: 200px;
    
27.         left: 40px;
    
28.         top: 20px;
    
29. }
    
30. .wrapper:nth-of-type(3) {
    
31.         width: 240px;
    
32.         height: 200px;
    
33.         left: 180px;
    
34.         bottom: 20px;
    
35. }
    
36. </style>
    
37. 
    
38. <div id="papa">
    
39.         <div class="wrapper">区域一</div>
    
40.         <div class="wrapper">区域二</div>
    
41.         <div class="wrapper">区域三</div>
    
42. </div>

复制代码

南无月

三个袋子装不同的东西放到不同的位置。。
难道许愿树的粒子、歌词，月亮，蝴蝶可以分别这么装？
不太理解，不用这个装好象也摆得开。。
应用到实例得试试才知道

红影

这个好，可以用nth-of-type(n) 伪类把有相同边线和居中设置的内容都弄好，然后把第n个元素的选择器里重新规定，在html按顺序调用，就能一个个显示出来了。学习了

马黑黑

南无月 发表于 2023-7-14 08:58
三个袋子装不同的东西放到不同的位置。。
难道许愿树的粒子、歌词，月亮，蝴蝶可以分别这么装？
不太理解 ...

能摆得开、摆得好就不用给它们找干爹

马黑黑

红影 发表于 2023-7-14 10:11
这个好，可以用nth-of-type(n) 伪类把有相同边线和居中设置的内容都弄好，然后把第n个元素的选择器里重新规 ...

用得上将就用用

红影

马黑黑 发表于 2023-7-14 12:53
用得上将就用用

这个肯定有用的，虽然还没想到怎么去用它

南无月

马黑黑 发表于 2023-7-14 12:52
能摆得开、摆得好就不用给它们找干爹

我，我，等下试试去。。

马黑黑

南无月 发表于 2023-7-14 18:10
我，我，等下试试去。。

需要收拢一些东东时，比方说粒子在树那里，可以试试本帖介绍的方法，省事得很

马黑黑

红影 发表于 2023-7-14 14:49
这个肯定有用的，虽然还没想到怎么去用它

先懂得可以这么做。将来用得上，试下

红影

马黑黑 发表于 2023-7-15 08:13
先懂得可以这么做。将来用得上，试下

嗯嗯，把一个元素弄出很多孩子来

马黑黑

红影 发表于 2023-7-15 08:33
嗯嗯，把一个元素弄出很多孩子来

记住，是孩子们去找干爹

红影

马黑黑 发表于 2023-7-15 09:19
记住，是孩子们去找干爹

嗯嗯，也受干爹限制。

马黑黑

红影 发表于 2023-7-15 09:57
嗯嗯，也受干爹限制。

就像这样说的吧，孩子不喜欢你家的环境，他们去认个新的干爹，搬去他那里住了，那里靠近游乐园。

南无月

马黑黑 发表于 2023-7-15 08:09
需要收拢一些东东时，比方说粒子在树那里，可以试试本帖介绍的方法，省事得很

昨天试了试，看来我得需要点时间想通它

马黑黑

南无月 发表于 2023-7-15 10:54
昨天试了试，看来我得需要点时间想通它

还没想通吗

红影

马黑黑 发表于 2023-7-15 10:16
就像这样说的吧，孩子不喜欢你家的环境，他们去认个新的干爹，搬去他那里住了，那里靠近游乐园。

去去，这什么乱例子啊，虽然可以解释代码却伤害了人世间的感情。

马黑黑

红影 发表于 2023-7-15 14:59
去去，这什么乱例子啊，虽然可以解释代码却伤害了人世间的感情。

有干爹多好

红影

马黑黑 发表于 2023-7-15 16:48
有干爹多好

现在这个词汇已经变得很烂了。