我正在为热点系统创建 HTML 凭证模板,并且需要以下内容。
我想并排打印两张凭证,然后将下两张凭证换行到下一行,问题是生成代码的系统不允许我为每张凭证分配不同的类别,所以css 需要自动处理它。关于如何执行此操作的任何想法?
最佳答案
只需为您的凭证和显示设置静态高度和宽度:inline-block。它们将根据自身相对于容器的大小进行包装。
#container {
display: block;
width: 250px;
position: relative;
border: solid 1px green;
}
.voucher {
display: inline-block;
position: relative;
width: 110px;
height: 110px;
margin: 3px;
border: solid 1px red;
}
<html>
<body>
<div id="container">
<div class="voucher">hi</div>
<div class="voucher">hi</div>
<div class="voucher">hi</div>
<div class="voucher">hi</div>
<div class="voucher">hi</div>
<div class="voucher">hi</div>
<div class="voucher">hi</div>
<div class="voucher">hi</div>
<div class="voucher">hi</div>
<div class="voucher">hi</div>
</div>
</body>
</html>
关于html - 如何制作自动换行到下一行的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30930792/