Сдвиг среднего div влево оставляет пустое пространство справа

Question

У меня есть три элемента 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 к среднему div.

.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 действовал как верхний индекс к предыдущемуотд.

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 в виде подразделов, подобных этому:

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

Это было бы как проще для чтения в коде, так и прощеконтролировать в отношении позиционирования.

Answer 3

Если вы не можете изменить структуру div (поместите середину внутрь слева), вы можете вместо этого поместить оболочку в position:relative и средний div в position:absolute.Это даст:

.wrapper-div {
   display: inline-block;
   position:relative;
}

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

Вот кодекс: https://codepen.io/anon/pen/ePrMqv

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>

Кодовое обозначение разницы между позиционированием / преобразованием / отрицательным полем