Question

我有两个具有display: flex和justify-content: space-between的同一行组件的实例：

<div class="component-row">
  <div>looooooooooong</div>
  <div>short</div>
  <div>mediummm</div>
</div>

<div class="component-row">
  <div>looooooooooong</div>
  <div>short</div>
  <div>mediummm</div>
</div>

每个组件的子项之间的间距将不同，因为子项具有不同的宽度。在不改变子节点顺序的情况下，如何确保两个组件实例在每个子节点之间具有相同的空间量？在实例中，空间（例如长与短之间的空间）不必相等 - 我想要的是两个实例的第一个和第二个子节点之间的空间是相同的，以及它们之间的空间两个实例的第二个和第三个孩子都是一样的。

Answer 1

这听起来非常简单，但是，只需在课堂上给出一个固定的宽度，然后将其放在.component-row儿童身上。

.component-row {
  display: flex;
  justify-content: space-between;
}

.eq1 {
  width: 30%;
}
.eq2 {
  width: 20%;
}
.eq3 {
  width: 35%;
}

<div class="component-row">
  <div class="eq1" style="background-color: red;">looooooooooong</div>
  <div class="eq2" style="background-color: purple;">short</div>
  <div class="eq3" style="background-color: pink;">awdasdsdasad</div>
</div>

<div class="component-row">
  <div class="eq1" style="background-color: green;">looooooooooong</div>
  <div class="eq2" style="background-color: yellow;">srt</div>
  <div class="eq3" style="background-color: blue;">mediummm</div>
</div>

Answer 2

最明显的是给每个项目一个宽度，但如果你不能或不想要，flexbox不是最好的解决方案，grid就是。CSS Grid。

由于CSS Table缺乏良好的浏览器支持，.component-container { display: table; width: calc(100% - 40px); } .component-row { display: table-row; } .component-row div { position: relative; display: table-cell; border: 1px solid gray; } .component-row div:nth-child(2) { left: 20px; } .component-row div:nth-child(3) { left: 40px; }不支持，并且是完成此任务的完美选择。

＆＃13;

<div class="component-container">
  <div class="component-row">
    <div>looooooooooong</div>
    <div>mediummm</div>
    <div>short</div>
  </div>

  <div class="component-row">
    <div>short</div>
    <div>looooooooooong</div>
    <div>mediummm</div>
  </div>
</div>

＆＃13;

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Cascade CheckBox in TreeGrid - jQuery EasyUI Demo</title>

        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>


    </head>
    <body>
        <h2>Cascade CheckBox in TreeGrid</h2>
        <p>TreeGrid nodes with cascade check boxes.</p>
        <div style="margin:20px 0;"></div>
        <table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"
                data-options="
                    url: 'treegrid_data1.json',
                    method: 'get',
                    checkbox: true,
                    rownumbers: true,
                    idField: 'id',
                    treeField: 'name'
                ">
            <thead>
                <tr>
                    <th data-options="field:'name'" width="220">Name</th>
                    <th data-options="field:'size'" width="100" align="right">Size</th>
                    <th data-options="field:'date'" width="150">Modified Date</th>
                </tr>
            </thead>
        </table>

    </body>
    </html>

＆＃13;

无论儿童宽度

2 个答案: