Question

我在wrapper-div中有三个div元素，如下所示：

<div class="wrapper-div">
    <div class="left-div">
        Hi
    </div>
    <div class="middle-div">
        Hello
    </div>
    <div class="right-div">
        Bye
    </div>
</div>

我在CSS下方应用了这些内容，使它们在同一行中并排显示。

.wrapper-div {
  display: inline-block;
}
.left-div {
    display: inline-block;
    width: 50px;
    height: 20px;
    margin-right: 10px;
    background-color: red;
}
.middle-div {
    display: inline-block;
    width: 20px;
    height: 10px;
    margin-right: 10px;
    background-color: green;
    font-size: 8px;
}
.right-div {
    display: inline-block;
    width: 50px;
    height: 20px;
    margin-right: 10px;
    background-color: blue;
}

现在，我希望中间div作为左div中文本的上标显示。为此，我将CSS下面的代码应用于中级细分市场。

.middle-div {
    display: inline-block;
    width: 20px;
    height: 10px;
    margin-right: 10px;
    background-color: green;
    font-size: 8px;
    position: relative;
    left: -45px;
    top: -5px;
}

这使中间div在左div上显示为上标，但在中间div的原始位置留下了不需要的空白。

您能帮我修复它吗？

注意：在我最初的问题中，我有一个不受控制的可变div数量，我希望每隔一个div充当其上一个div的上标。

Answer 1

将包装器设置为position: relative;和display: flex; 那么您只需要将中间div设置为上标效果，就可以将其设置为absolute。

.wrapper-div {
  display: flex;
  position: relative;
}
.left-div {
    display: inline-block;
    width: 50px;
    height: 20px;
    background-color: red;
    position: relative;
    margin-right: 0;
}
.middle-div {
    display: block;
    width: 20px;
    height: 10px;
    background-color: green;
    font-size: 8px;
    position: absolute;
    left: 25px;
    top: 2px;
}
.right-div {
    display: inline-block;
    width: 50px;
    height: 20px;
    margin-right: 10px;
    background-color: blue;
}

<div class="wrapper-div">
    <div class="left-div">
        Hi
    </div>
    <div class="middle-div">
          Hello
        </div>
    <div class="right-div">
        Bye
    </div>
</div>

Answer 2

如果您无法更改div结构（将中间部分放在左侧），则可以将包装器放在kotlin-android-extensions中，而将中间div放置在position:relative中。它将给出：

position:absolute

这是一个Codepen：https://codepen.io/anon/pen/ePrMqv

Answer 3

我相信将“上标” div设置为以下细分将是更正确的选择（并且还可以减轻您的头痛）：

<div class="left-div">
    Hi
    <div class="middle-div">
        Hello
    </div>
</div>

这将更易于阅读代码并更易于控制定位。

Answer 4

不使用定位：使用负边距。

.wrapper-div {
  display: inline-block;
}

.left-div {
  display: inline-block;
  width: 50px;
  height: 20px;
  margin-right: 10px;
  background-color: red;
}

.middle-div {
  display: inline-block;
  width: 20px;
  height: 10px;
  background-color: green;
  font-size: 8px;
  margin-left: -35px;
  margin-right: 0;
  vertical-align: top;
}

.right-div {
  display: inline-block;
  width: 50px;
  height: 20px;
  margin-right: 10px;
  background-color: blue;
}

<div class="wrapper-div">
  <div class="left-div">
    Hi
  </div>
  <div class="middle-div">
    Hello
  </div>
  <div class="right-div">
    Bye
  </div>
</div>

Codepen of the difference between positioning / transform / negative margin

将中间div向左移动会在其右侧留下空白

4 个答案: