Question

我想连续设置几个div，但发现不必一次又一次地复制代码。我怎么可能以比我在这里描述的更有效的方式将同一个div放在另一个之后5倍？

HTML：

<div class="procduct">
    <div class="image">
        <img src="http://i.stack.imgur.com/rOVDt.jpg"/>                
    </div>
    <div class="overlay"></div>
</div>

<div class="procduct">
    <div class="image">
        <img src="http://i.stack.imgur.com/rOVDt.jpg"/>                
    </div>
    <div class="overlay"></div>
</div>

<div class="procduct">
    <div class="image">
        <img src="http://i.stack.imgur.com/rOVDt.jpg"/>                
    </div>
    <div class="overlay"></div>
</div>

<div class="procduct">
    <div class="image">
        <img src="http://i.stack.imgur.com/rOVDt.jpg"/>                
    </div>
    <div class="overlay"></div>
</div>

CSS：

.procduct {
    margin: 5px;
    padding: 5px;
    height: 150px;
    width: 150px;
    border: 1px solid #F00;
    float: left;
}
    .image {
    z-index: -1;
    position: absolute;
}
    .overlay {
    padding-top: 65px;
    padding-left: 17px;
    display:none;
}
    .procduct:hover .overlay {
    display:block; 

}
    .procduct:hover .image {
    opacity:0.00;    
}
    .clear {
    clear: both;
}

http://jsfiddle.net/ghac101/hvpn4/

Answer 1

不幸的是，vanilla HTML生产无法神奇地减少所需的工作量。但是，您可以使用HAML之类的框架来减少重复性。

例如，代码：

<div class='content'>Hello, World!</div>

在HAML中，

可以成为：

.content Hello, World!

这不完全是你正在寻找的东西，但它可能会尽可能接近你。最重要的是你不能用这种方式写HTML。但是，您可以使用其他语言（如JavaScript或PHP）来创建或复制HTML元素。

Answer 2

肯定有：

<?php

$numberofdivs = 5;

for ($i=1;$i<$numberofdivs;$i++) {
  echo '<div class="procduct">
        <div class="image">
        <img src="http://i.stack.imgur.com/rOVDt.jpg"/>
        </div>
        <div class="overlay"></div>
        </div>';
}

?>

希望这有帮助。

将同一个Div放在另一个之后？

2 个答案: