css - 更改位置网格
解决方案
你可以用它display: flex
来解决你需要处理的所有问题,以获得你想要的东西。
有关演示,请参阅随附的代码段。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<style>
.block-container {
display: flex;
flex-direction: row;
}
.block {
margin: 10px;
width: 100%;
}
</style>
</head>
<body>
<div class="block-container">
<div class="block">
<label for="name">Name: </label><input type="text" id="name">
</div>
<div class="block">
<div id="grid"></div>
</div>
</div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
}
});
</script>
</body>
</html>
推荐阅读
- python - 如何在 Python 中比较和排名 ETF?
- php - 我得到这个错误。[此路由不支持 GET 方法。支持的方法:POST。]
- node.js - results.map 不是函数
- symfony - Symfony 5 中使用 LDAP 和 DB 的多重身份验证
- python - Miniconda virtualenvs 激活“源激活”与“conda 激活”
- tsql - 无法绑定多部分标识符 - SQL Server 2016
- python - 将 Python 程序的交互控制权交给用户
- sql-server - 在 SQL Server 中查找以 hh:mm:ss 为单位的持续时间
- tensorflow - tf.constant() 中 2 和 2. 的区别 - Tensorflow 中数据类型的动态分配
- react-native - 华为 React Native Map Kit Markers 未使用底部选项卡呈现