javascript - 动态创建的卡片是垂直排列的,应该是水平的
问题描述
我正在尝试动态创建卡片,但是当我创建卡片时,它们是垂直排列的。我需要它们水平排列。
function _getall() {
$.ajax({
url: 'http://localhost:8888/books1/getall',
type: 'GET',
dataType:'json',
success: function(data) {
var templateString = '';
$.each(data, function(i, item) {
templateString = '<div class="card"><div class="container">
<h4><b>'+item.name+'</b></h4><p>'+item.description+'</p><h4>'
+ item.author+'</h4><h4>' + item.price+'</h4><h4>'
+ item.release_date+'</h4><button class="button"
onclick="_deleteBook('+item.id+')">Delete</button>'
+ '<a href="http://localhost:8888/updatebook"><button
class="button" onclick="_update('+item.id+')">Update</button></a>
</div>
</div>';
$('#test').append(templateString);
})
},
error: function(request, error) {
alert("Request: " + JSON.stringify(request));
}
});
解决方案
您应该能够为您的卡片创建一个简单的 CSS 类。这是我假设您的 templateString 将在浏览器中呈现的示例。您可以看到您的卡片现在是如何水平堆叠的。
.card {
border: 1px solid #000;
display: inline-block;
padding: 20px;
margin: 5px;
}
更进一步,如果您想要响应式布局,我会考虑使用Bootstrap 网格。
推荐阅读
- jenkins - WinRM 连接问题
- ios - 使用strokeColor,从中心到圆周画一条线
- python - 熊猫数据重新排列
- java - 从android调用时缺少所需的请求正文,但与邮递员一起工作正常
- javascript - React Native Redux Reducer 不工作
- javascript - 为什么在输入用户输入时过滤不能以角度工作?
- symfony4 - 带有参数 base_path 的 Symfony4 资产
- c# - 创建一个数组或列表来计算值
- arduino - Raspberry 和 arduino 通信(通过 USB)之间的协议名称是什么?
- sql - 比较两个不同表的日期时间,发现列之间没有