三列宽度相等，四列最小宽度

Question

我在页面上有四列，其中包含指向左或向右的箭头。我希望调整这些列的大小，以便它们仅与它们包含的箭头一样宽。但是，我希望其余三列（"col-1"、"col-2"和"col-3"）保持相同的宽度，无论它们包含什么数据。

<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>

"right-1"、"

right-2"、"left-1"和"left-2"是我希望保持最小宽度的列。

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

什么 css 将为我实现这一点？

Answer 1

将您的 css 更改为此，它会正常工作，希望对您有所帮助！

let a = ["l", "e", "f", "t"];
let b = ["r", "i", "g", "h", "t"];
let c = ["n", "e", "w"];
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)
        ),
        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, 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, 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 => {});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
html, body {
    width: 100%
}
.divsholder {
    display: flex;
    border: 1px solid blue;
}
div {
    border: 1px dashed red;
    margin: 5px;
}
.column {
    flex: 1;
}
.mini-column {
    flex: 0;
    border: 1px dashed blue;
}

<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>