SOURCE

<div class="layui-row layui-col-space15" style="padding: 16px;">
    <div class="layui-card layui-col-xs5">
        <div class="layui-card-header">参数</div>
        <div class="layui-card-body" style="height:600px">
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select name="interest" lay-filter="aihao">
                            <option value="">选择打印机</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="远程|本地">
                    </div>
                </div>
                <hr>
            </form>
        </div>
    </div>
    <div class="layui-card layui-col-xs7">
        <div class="layui-card-header">预览</div>
        <div class="layui-card-body" style="height:600px">
        结合 layui 的栅格系统<br>
        轻松实现响应式布局
        </div>
    </div>
</div>

html,body{ height: 100%; margin: 0; padding: 0; }
.flow-view{ overflow: auto; }
.flow-view li {
display: inline-block;
margin: 2px;
width: 20%;
height: 128px;
text-align: center;
}
.flow-view img{
width: auto; height: 110px; border:1px solid #ccc;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill-opacity=".1"><rect x="0" y="16" width="32" height="16"/><rect x="16" y="0" width="16" height="32"/></svg>');
}
.flow-view span{ display:block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }