如何循环或迭代相同组件的 html 代码

Question

下面的 html 代码用于显示一个包含 4 个文本区域、3 个图像和 3 个标签的容器：

HTML

<div class="row">
    <div class="col-md-2">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <div class="alert alert-info alert-dismissable">
            <textarea class="form-control3" rows="3" placeholder="Clue 1"></textarea>
            <textarea class="form-control4" rows="3" placeholder="Answer"></textarea>
            <input type="text" class="form-control1" placeholder="10">
            <input type="text" class="form-control2" placeholder="Rejected">
            <div>
                <img src="images/up.png" width="13px" ;height="13px">&nbsp;
                <div class="blank"></div> 
                <span class="badge badge-danger">100</span>
                <img src="images/down.png" width="13px" ;height="13px">&nbsp;
                <div class="blank"></div>
                <span class="badge badge-danger">50</span>
                <img src="images/eye.png" width="20px" ;height="20px">
                <div class="blank"></div> <span class="badge badge-danger">120</span>
            </div>
        </div>
    </div>

CSS

.form-inline .form-control3 {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
.has-warning .form-control4:focus {
    border-color: #66512c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
}
.has-error .form-control1:focus {
    border-color: #843534;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .form-control2 {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

我希望多个容器显示在一个 html 页面中。我的问题是，有没有一种方法可以只编写一次 html 和 css 代码并将其用于其他容器，而无需一次又一次地重复代码（如一些迭代或循环方法或任何其他方法）？

另外，我想在 css 中对图像进行样式化和定位，而不是在我的 html 代码本身中使用样式元素的高度和宽度。我尝试对图像使用单独的 div 标签并对齐它。但它不起作用。请你帮我解决这两个问题。

提前致谢

Answer 1

使用 Jquery 制作 div 的副本。如果您是一个只有 HTML 和 css 的人，我很抱歉，我认为没有任何办法。如果 HTML 来自任何网络服务器 PHP 或 .NET 服务器端，我们可以制作多个副本。