HTML/CSS 初学者 - 嵌套
内的 s然后应用定位

发布于 2025-01-02 01:32:08 字数 287 浏览 1 评论 0原文

我正在尝试在页面中心显示基本的 4 块布局。我当前的努力是在父 div (class=wrapper) 上利用以下内容，

.wrapper
{
margin:0 auto;
width:960px;
}

但是，尽管这将所有子 div 居中，但它不允许我根据我想要的布局定位子 div，即有一个块 left:36px 和 top： 120 像素。

我有什么想法可以绝对定位子 div，但相对于 .wrapper div 的中心定位？

谢谢。

马特

原文

I am trying to display a basic 4 block layout to the centre of the page. My current effort is utilising the following on the parent div (class=wrapper)

.wrapper
{
margin:0 auto;
width:960px;
}

However, although this then centres all child divs it does not allow me to position the child divs as per my desired layout i.e. having a block left:36px and top: 120px.

Any ideas how I can position child divs absolutely, but in relation to the central positioning of the .wrapper div?

Thanks.

Matt

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

魔法唧唧 2025-01-09 01:32:08

要相对于父 div (.wrapper) 定位子 div，您可以执行类似以下操作：

.wrapper {
  position: relative;
  margin: 0 auto;
  width: 960px;
}
#child-1 {
  position: absolute;
  top: 120px;
  left: 36px;
}

您需要将 position:relative; 添加到父 div，以便在使用 position 时:absolute; 在子块上，它们将绝对定位在父 div 内。

请参阅 JSFiddle 上的示例。

另外，为了快速入门，十步学习 CSS 定位

To position the child divs in relation to the parent div (.wrapper), you can do something similar to:

.wrapper {
  position: relative;
  margin: 0 auto;
  width: 960px;
}
#child-1 {
  position: absolute;
  top: 120px;
  left: 36px;
}

You need to add position: relative; to the parent div so that while using position: absolute; on the child blocks, they will be positioned absolutely within the parent div.

See the example on JSFiddle.

Also, for a quick start, Learn CSS Positioning in Ten Steps

回复收藏 0 原文