Question

我在页面上有四列包含指向左或右的箭头。我希望调整这些列的大小，使它们只与它们包含的箭头一样宽。但是，我希望其余三列（＆＃34; col-1＆＃34;，＆＃34; col-2＆＃34;＆＃34; col-3＆＃34;）保持同样宽，无论什么它们包含的数据。

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

＆＃34; right-1＆＃34;，＆＃34; right-2＆＃34;，＆＃34; left-1＆＃34;和＆＃34;左-2＆＃34;是我希望保持最小宽度的列。

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>

Answer 2

您可以更改列的flex属性，如下所示：

.column {
  flex:100;
}
.mini-column {
  flex:1
}

以下是完整代码：

＆＃13;

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 => {});

＆＃13;

* {
  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:100;
}
.mini-column {
  border: 1px dashed blue;
  flex:1
}

＆＃13;

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

＆＃13;

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

2 个答案: