html - 如何制作自动换行到下一行的div

标签 html css

我正在为热点系统创建 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/

相关文章:

带有 Bootstrap 的 JavaScript 表格过滤器

javascript - 需要帮助使用 css div ul li 列表创建 html 页面以使其旋转

javascript - HTML5 Canvas 转 PDF

html - 带边框的 chrome、IE 等中的缩小错误?

javascript - 链接两个选择的表单元素

html - 如何编写 html 电子邮件以打印出两个单独的页面?

css - 允许最终用户拥有他们可以修改的特定 CSS 规则

javascript - 在表单的模式对话框顶部显示日期选择器

javascript - 定位和样式 ajax 加载器

css - Sass 颜色函数列表渐变