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来自任何Web服务器PHP或.NEt服务器端，我们可以制作多个副本。

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

1 个答案: