Question

我正在将我的桌面项目转换为Web，到目前为止，我已经有了这种布局。我关心的是如何将我的div放在另一个div的下面，并采用/填充父级宽度。 我的目标是在按钮下方显示lt-list，lt-kanban和lt-form（取决于所选视图：列表视图，看板视图和表单视图）。这是我到目前为止所做的：

.lt-content { grid-area: content; height: 85vh;}

#lt-button {
    vertical-align:top;
    display: inline-block;
    padding : 0;
    margin : 0;
    float : left;
}

#lt-view {
    vertical-align:top;
    display: inline-block;
    padding : 0;
    margin : 0;
    float : right;
}

#lt-list {
    display: inline-block;
    padding : 0;
    margin : 0;
    float : left;
    background: #9ec4ff;
    width: inherit;
}

#lt-kanban {
    vertical-align:top;
    display: inline-block;
    padding : 0;
    margin : 0;
    float : left;
    background: #a3ffa3;
}

#lt-form {
    vertical-align:top;
    display: inline-block;
    padding : 0;
    margin : 0;
    float : left;
    background: #fff5b7;
}

这是我的html：

<div class="lt-content">
    <div id="lt-button" style="position: relative">
        <div class="btn-group btn-group-sm" role="group" style="background: " aria-label="Basic example">
            <button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">CREATE</button>
            <button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">EDIT</button>
            <button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">DELETE</button>
            <button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">SAVE</button>
            <button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">CANCEL</button>
        </div>
    </div>
    <div id="lt-view">
        <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-floating cyan btn-sm" style="border-radius: 0;"><i class="fas fa-list" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-floating cyan btn-sm" style="border-radius: 0;"><i class="fas fa-th-large" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-floating cyan btn-sm" style="border-radius: 0;"><i class="fab fa-wpforms"></i></button>
        </div>
    </div>
    <div id="lt-list">
        This is a list view....
        <br>
        This is a list view....
        <br>
    </div>
    <div id="lt-kanban" style="position: relative">
        This is a Kanban view....
        <br>
        This is a Kanban view....
        <br>
    </div>
    <div id="lt-form" style="position: relative">
        This is a Form view....
        <br>
        This is a Form view....
        <br>
    </div>
</div>

这是我的布局图像：

Answer 1

首先，当您之后使用float: right/left属性时，display: inline-block被覆盖。

您可以通过多种方式（网格布局，伸缩等）获得所需的结果。使用浮点数之类的方法并不是最好的方法。这是使用flex的示例。我摆脱了所有的float，vertical-align和inline-blocks，并将按钮包装在div中并添加了一个类。

Here you go

Answer 2

将#lt-button的css更改为以下内容：

#lt-button {
    display: block;
    padding : 0;
    margin : 0;
}

这将在您的按钮下获得列表视图，看板视图和表单视图。之后，您可以使用js / jQuery（或其他脚本语言）显示和隐藏基于点击的div。

Answer 3

添加两个div，一个包含lt-button和lt-view，另一个（id为board）包含lt-list，lt-kanban和{{ 1}}

然后添加此CSS：

lt-form

也就是说，如果您的目标是用这些颜色制作三列，但这会给出一个主意。

如何在另一个div下方放置一个div并填充大小？

3 个答案: