css 如何在父级中自动垂直堆叠div?

0s7z1bwu  于 2023-05-30  发布在  其他
关注(0)|答案(7)|浏览(144)

这就是我想要完成的

1.“parent”有position:relative
1.“div 1-3”具有位置:绝对
然而,每当我这样做时,我发现自己必须在CSS中指定特定的“top”值。所以div 1可能是top:50 px,div 2是top:150 px,div 3是top:225 px;
有没有一种方法可以确保div继续在父级中堆叠,而不分配顶部值和/或绝对位置?

erhoui1w

erhoui1w1#

一个div应该已经显示为一个块,并占据了一个完整的“行”。下面是一些HTML和CSS的例子,与你的代码进行比较:
http://jsfiddle.net/mWcWV/

<div id="parent">

    <div class="child">Foo</div>
    <div class="child">Bar</div>
    <div class="child">Baz</div>

</div>
dnph8jn4

dnph8jn42#

应该是直的:
HTML:

<div class="container">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</div>

CSS:

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #ffbf00;
}
.red {
    background-color: #f00;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}
.blue { 
    background-color: #0f0;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}
.green {
    background-color: #00f;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}

检查这个fiddle

zfciruhq

zfciruhq3#

css文件中使用...

div
{
    display : block;
}

这将为每个div块给予一个中断线,该功能是默认的,不使用relative-absolute技术。

uklbhaso

uklbhaso4#

Div元素是块元素,这意味着它们将占据一整行,并且它们旁边的任何元素都将跳过一行。只要做:

<div></div>
<div></div>
<div></div>

如果这不起作用,您可能需要将它们显示出来:内联块;

hmae6n7t

hmae6n7t5#

只需要删除绝对定位。使用margin:auto将div居中,然后提供您喜欢的任何垂直边距。

svdrlsy4

svdrlsy46#

你可以给内部的div给予边距。

juud5qan

juud5qan7#

HTML:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <button class="child"></button>
</div>

CSS:

.parent {
  display: block;
}

.child {
  margin: auto;
}

相关问题