这就是我想要完成的
1.“parent”有position:relative1.“div 1-3”具有位置:绝对然而,每当我这样做时,我发现自己必须在CSS中指定特定的“top”值。所以div 1可能是top:50 px,div 2是top:150 px,div 3是top:225 px;有没有一种方法可以确保div继续在父级中堆叠,而不分配顶部值和/或绝对位置?
erhoui1w1#
一个div应该已经显示为一个块,并占据了一个完整的“行”。下面是一些HTML和CSS的例子,与你的代码进行比较:http://jsfiddle.net/mWcWV/
div
<div id="parent"> <div class="child">Foo</div> <div class="child">Bar</div> <div class="child">Baz</div> </div>
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。
zfciruhq3#
在css文件中使用...
css
div { display : block; }
这将为每个div块给予一个中断线,该功能是默认的,不使用relative-absolute技术。
relative
absolute
uklbhaso4#
Div元素是块元素,这意味着它们将占据一整行,并且它们旁边的任何元素都将跳过一行。只要做:
<div></div> <div></div> <div></div>
如果这不起作用,您可能需要将它们显示出来:内联块;
hmae6n7t5#
只需要删除绝对定位。使用margin:auto将div居中,然后提供您喜欢的任何垂直边距。
margin:auto
svdrlsy46#
你可以给内部的div给予边距。
juud5qan7#
HTML:
<div class="parent"> <div class="child"></div> <div class="child"></div> <button class="child"></button> </div>
.parent { display: block; } .child { margin: auto; }
7条答案
按热度按时间erhoui1w1#
一个
div
应该已经显示为一个块,并占据了一个完整的“行”。下面是一些HTML和CSS的例子,与你的代码进行比较:http://jsfiddle.net/mWcWV/
dnph8jn42#
应该是直的:
HTML:
CSS:
检查这个fiddle。
zfciruhq3#
在
css
文件中使用...这将为每个
div
块给予一个中断线,该功能是默认的,不使用relative
-absolute
技术。uklbhaso4#
Div元素是块元素,这意味着它们将占据一整行,并且它们旁边的任何元素都将跳过一行。只要做:
如果这不起作用,您可能需要将它们显示出来:内联块;
hmae6n7t5#
只需要删除绝对定位。使用
margin:auto
将div居中,然后提供您喜欢的任何垂直边距。svdrlsy46#
你可以给内部的div给予边距。
juud5qan7#
HTML:
CSS: