我的 CSS 技能现在很低,我需要为我的网站做一些困难的事情。任何帮助将不胜感激。谢谢。
在图片“parent”div(宽度等于某个常量值)中可能有任意数量(这是我的问题的症结所在) child ,其中有一些长词。
.wrap{
position: static;
}
.parent{
position: absolute;
width:100%;
}
.child{
float: left;
visibility: hidden;
}
<div class="wrap">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
children 必须“漂浮”在 parent 之上, child 之间的间距应该不会让太长的单词覆盖在每个 child 之上。
附言我想强调的是: children 必须像图片中那样飞过 parent ,他们之间有一些间距。我知道“相对绝对”定位,但这还不足以让 child 像图中那样飞起来。
最佳答案
您可以将子元素设置为相对定位,然后将它们的顶部偏移量设置为某个负值,这会将它们拉到父元素之上。要在每个 child 之间创建空间,您可以将第一个和最后一个 child 的左右偏移设置为某个值。
请看下面的演示:
/*IGNORE STYLES FROM HERE.....*/
body {
display: flex;
height: 100vh;
}
.container {
border: 5px solid navy;
width: 500px;
margin: auto;
}
.box {
background: white;
border: 5px solid navy;
overflow: auto;
padding: 40px;
position: relative;
top: -100px;
}
/*....UNITL HERE*/
.container {
display: flex;
}
.box {
overflow: auto;
position: relative;
top: -100px;
}
.box:first-child {
left: -50px;
}
.box:last-child {
right: -50px;
}
<div class="container">
<div class="box">
<h2 class="box__title">Child</h2>
<p class="box__word">LooooooooooooooongWorrrrrrrrrrd</p>
</div>
<div class="box">
<h2 class="box__title">Child</h2>
<p class="box__word">LooooooooooooooongWorrrrrrrrrrd</p>
</div>
<div class="box">
<h2 class="box__title">Child</h2>
<p class="box__word">LooooooooooooooongWorrrrrrrrrrd</p>
</div>
</div>
关于css - 在纯 CSS 中,父级之上的子级具有动态间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53159419/