Question

我为这种行为而斗争。我在DIV容器中添加了两个DIV（sub1和sub2）。 Sub2设置为与Sub1的右下角重叠的相对位置。这样做，容器DIV的宽度不是很好，它与改变Sub1的相对位置之前是一样的。起初，它没有问题，但随后，客户决定将整个事物集中在一起，因此需要容器的实际宽度。

这可以通过CSS实现吗？即使在JavaScript中，我也有相同的宽度（错误的一个）。

以下是问题的一个简单示例：

＆＃13;

html, body {
  width:100%;
  height: 100%;
}

#main {
  position: fixed;
  display: inline-block;
  margin: auto;
}

#sub1 {
  width: 100px;
  height: 100px;
  background-color:red;
  position: relative;
}

#sub2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  left: 80px;
  top: -20px;
}

＆＃13;

<div id="main">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>

＆＃13;

Answer 1

如果您希望容器DIV具有两个块的宽度，则不应使用相对定位。改为使用保证金

#sub2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-left: 80px;
  margin-top: -20px;
}

Answer 2

我有点不清楚你想看到什么行为。我认为你想要红色和蓝色方块重叠，但你还希望它们在页面中居中？在这种情况下，解决方案很简单，只需在＆＃34; main＆＃34;之间添加另一个DIV层。和较小的盒子。

＆＃13;

html, body {
  width:100%;
  height: 100%;
}

#main {
  position: fixed;
  display: inline-block;
  margin: auto;
  width: 100%;
  height: 100%;
}

#center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#sub1 {
  width: 100px;
  height: 100px;
  background-color:red;
  position: relative;
}

#sub2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  left: 80px;
  top: -20px;
}

＆＃13;

<div id="main">
    <div id="center">
        <div id="sub1">
        </div>
        <div id="sub2">
        </div>
    </div>
</div>

＆＃13;

通常对于每个＆＃34;转换＆＃34;如果你想要一个元素，你应该为它进行另一个DIV包装器的转换。这样，每个转换都是彼此独立的，并且它们更容易管理。

Answer 3

以下是一种将任何元素居中的常用方法（不添加更多div）：将@属性与transform（或left一起使用以进行垂直居中）。

＆＃13;

top

＆＃13;

html, body {
    width:100%;
    height: 100%;
}

#main {
    position: fixed;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
}

#sub1 {
    width: 100px;
    height: 100px;
    background-color:red;
    position: relative;
}

#sub2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    left: 80px;
    top: -20px;
}

＆＃13;

我还从<div id="main"> <div id="sub1"></div> <div id="sub2"></div> </div>删除了display: inline-block;，因为它在此演示中没有做任何事情。

使用CSS将包含相对元素的DIV居中

3 个答案: