Question

我有一个PHP页面，该页面在div包装器包含的div元素中向表中添加和删除值。目标是使表格建立在右侧，并固定在最左侧的位置（下面的代码）。我拥有的代码最初将所有内容居中，但是随着值的添加或删除，表也会移动。请参阅下面的图片，以更清晰地了解我在说什么。

滚动之前：我的问题：当内部div正确增长时，如何保持其内部的左边缘固定？

在包装div中居中的div，看起来不错！。

输入新用户后，它向左移动，而我希望div向右增长。如您所见，左侧div的边缘不再位于show N的下方，而是位于t in to处。为什么会这样呢？请参阅下面的CSS。

此示例的CSS：

.wrapper {
    position: fixed;
    top: 100;
    left: 0;
    height: 50%;
    width: 100%;

    /* this is what centers your element in the fixed wrapper*/
    display: flex;
    flex-flow: column nowrap;
    justify-content: center; /* aligns on vertical for column */
    align-items: center; /* aligns on horizontal for column */

    /* just for styling to see the limits */
    border: 2px dashed red;
    box-sizing: border-box;
}

.element {
    position: absolute;
    border: 2px dashed purple;
    padding: 10px;
    box-sizing: border-box;
}

创建这些表（从ini文件读取并动态创建每个节的表）：

<div class="wrapper">
<div class="element">
    <?php 
        $file = "pages/test.ini";
        $data = parse_ini_file($file, true);

        foreach ($data as $section => $section_content) {
    ?>
            <table style='padding:5px; background-color: white; border: 1px solid black;'>
                <h3><?=$section?>   <i class='glyphicon glyphicon-plus' id='<?=$section?>' onclick="add(id, 'addUser')" style='padding: 2px;'></i><i class='glyphicon glyphicon-remove' id='<?=$section?>' onclick="remove(id, 'removeUser')" style='padding: 2px;'></i></h3>
                    <td style='padding:2px; border: 1px solid black;'><strong>Users</strong></td>
                    <td style='padding:2px; border: 1px solid black;'><?=$section_content['users'];?></td>
                </tr>
                <tr>
                    <td style='padding:2px; border: 1px solid black;'><strong>Groups</strong></td>
                    <td style='padding:2px; border: 1px solid black;'><?=$section_content['groups'];?></td>
                </tr>
            </table>    

        <?php } ?>
</div>
</div>

Answer 1

我认为发生这种情况的原因是使用.element放置了紫色的flex容器，并且没有集合height或width。因此，它随内容而增长。

您可以根据自己的需求以多种方式解决此问题。

在width上设置max-width或.element
将.container设置为向左弯曲，并给.container一些margin-left来赋予左位置
在left上添加一个.container位置，这样它只会向右增长

添加到表格后，防止内部div向左滑动

1 个答案: