垂直对齐具有不同高度的div

Question

我有以下页面，其中箭头用于在三列之间移动文本。

但是我希望将每个箭头定位，使其与与之关联的句子垂直对齐。我怎么能实现这个目标？

http://jsfiddle.net/barra/121v4ow8/198/

<div class="divsholder">
  <div id="col-1" class="column"></div>
  <div id="right-1" class="mini-column"></div>
  <div id="left-1" class="mini-column"></div>
  <div id="col-2" class="column"></div>
  <div id="right-2" class="mini-column"></div>
  <div id="left-2" class="mini-column"></div>
  <div id="col-3" class="column"></div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html,
body {
  width: 100%
}

.divsholder {
  display: flex;
  border: 1px solid blue;
}

.divsholder > div {
  flex: 1;
}

div {
  border: 1px dashed red;
  margin: 5px;
}

#left-1,
#left-2,
#right-1,
#right-2 {
    max-width: fit-content;
}

Answer 1

以下是JQuery解决方案的示例。我们的想法是根据文本元素的高度添加一个margin-bottom。

let data = {
    "bad":["bbbbbbbbbbbb bbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbb", "a", "d"], 
    "unknown": ["m", "i", "ddddddddddddd dddddddd ddddddddd dddddddddd", "d", "l","e"], 
		"good": ["g", "o", "o", "d"]
};
let a = data.bad;
let b = data.unknown;
let c = data.good;
a.sort();
b.sort();
c.sort();

let draw_column = (id, data, func) => {
  data.forEach((n, i) => $('#' + id).append(
    $('<div/>', {
      'text': n,
      'id': id + '-' + i
    }).on({
      'click': () => func(i)
    })
  ))
}

let redraw_column = (id, data, func) => {
  $("#" + id).empty(),
    draw_column(id, data, func)
};

let move_data = (data1, data2, i) => {
    data2.push(
        data1.splice(i, 1)[0]
    ),
    data1.sort(),
    data2.sort()
}

let left_data = (l) => {
    return Array(l).fill('<');
}

let right_data = (l) => {
    return Array(l).fill('>');
}

let move = (data1, data2, i) => {
    move_data(data1,data2,i),
    redraw_column("col-1", a, i => {}),
    redraw_column("right-1",right_data(a.length),i=>move(a, b, i)),
    redraw_column("left-1",left_data(b.length),i=>move(b, a, i)),
    redraw_column("col-2", b, i => {}),
    redraw_column("right-2",right_data(b.length),i=>move(b, c, i)),
    redraw_column("left-2",left_data(c.length),i=>move(c, b, i)),
    redraw_column("col-3", c, i => {})
}

draw_column("col-1", a, i => {});
draw_column("right-1", right_data(a.length), i => move(a, b, i));
draw_column("left-1", left_data(b.length), i => move(b, a, i));
draw_column("col-2", b, i => {});
draw_column("right-2", right_data(b.length), i => move(b, c, i));
draw_column("left-2", left_data(c.length), i => move(c, b, i));
draw_column("col-3", c, i => {});

var count = 0;
$('#right-1 > div').each(function() {
    $(this).css('margin-bottom',($('#col-1 > div').eq(count).outerHeight()-$(this).outerHeight()+4)+'px');
    count++;
})

count = 0;
$('#left-1 > div').each(function() {
    $(this).css('margin-bottom',($('#col-2 > div').eq(count).outerHeight()-$(this).outerHeight()+4)+'px');
    count++;
})
count = 0;
$('#right-2 > div').each(function() {
    $(this).css('margin-bottom',($('#col-2 > div').eq(count).outerHeight()-$(this).outerHeight()+4)+'px');
    count++;
})

count = 0;
$('#left-2 > div').each(function() {
    $(this).css('margin-bottom',($('#col-3 > div').eq(count).outerHeight()-$(this).outerHeight()+4)+'px');
    count++;
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html,
body {
  width: 100%
}

.divsholder {
  display: flex;
  border: 1px solid blue;
}

.divsholder > div {
  flex: 1;
}

div {
  border: 1px dashed red;
  margin: 5px;
}

#left-1,
#left-2,
#right-1,
#right-2 {
    max-width: fit-content;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divsholder">
  <div id="col-1" class="column"></div>
  <div id="right-1" class="mini-column"></div>
  <div id="left-1" class="mini-column"></div>
  <div id="col-2" class="column"></div>
  <div id="right-2" class="mini-column"></div>
  <div id="left-2" class="mini-column"></div>
  <div id="col-3" class="column"></div>
</div>

Answer 2

由于容器具有响应性且文本在这些容器内以动态高度流动，因此如果它们分开，您无法预先知道箭头元素的位置，因此您有两种选择：

1. 让文本和每个箭头共享一个容器，以便您可以相对于文本定位箭头。这可能是最干净的。您甚至可以使用：before和：after伪元素来创建箭头，并显示/隐藏左或右（：before或：after）箭头，具体取决于它所在的列。

2. 使用JavaScript获取每个文本块的垂直位置，并将这些高度应用于相对箭头元素。使用您的代码，您需要在每次点击（元素移动列）和调整大小时更新这些位置。