问题：

如何为每个div(php)生成唯一的类（循环）？

习胤运

2023-03-14

我正在努力寻找/整合我在网上找到的任何解决方案，以帮助为每个div生成一个独特的类。例如，如果将div称为“gallery-div”，并将1添加到每个div中，例如gallery-div1、gallery-div2、gallery-div3等，则会很好。

这是我目前拥有的（还没有设置唯一的类）：

null

.headstone-category-container {
  max-width: 100%;
  margin: 0 auto;
} /* Sets headstone category divs to take up 100% of the available width within its container */

.grid-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
} /* Sets the way the headstone category divs are displayed (horizontally) 
and allows for them to wrap round each other when screen adjusting */

.grid-item2 {
  height: 100%;
  flex-basis: 20%;
  -ms-flex: auto;
  width: 100%;
  position: relative;
  padding: 0.75%;
  box-sizing: border-box;
} /* Sets padding between headstone category divs, sets sizing and sets for row to be 5 divs */

.grid-item3 {
  height: 100%;
  flex-basis: 20%;
  -ms-flex: auto;
  width: 100%;
  position: relative;
  padding: 0.75%;
  box-sizing: border-box;
} /* Sets padding between headstone category divs, sets sizing and sets for row to be 5 divs */

.wrapping-link {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  color: currentColor;
} /* Allows the user to be able to click anywhere within the headstone category div to access the href link */

.grid-item-wrapper {
  padding: 4px;
  -webkit-box-sizing: initial;
  -moz-box-sizing: initial;
  box-sizing: initial;
  background-image: linear-gradient(to right, rgb(223, 219, 219) , rgb(252, 252, 250));
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-transition: padding 0.15s cubic-bezier(0.4,0,0.9,1), margin 0.15s cubic-bezier(0.4,0,0.9,1), box-shadow 0.15s cubic-bezier(0.4,0,0.9,1);
  transition: padding 0.15s cubic-bezier(0.4,0,0.9,1), margin 0.15s cubic-bezier(0.4,0,0.9,1), box-shadow 0.15s cubic-bezier(0.4,0,0.9,1);
  position: relative;
  border-radius: 12px;
  border: 1px solid black;
} /* Adds styling, sets sizing and sets transition speed of the headstone category div */

.grid-item-container {
  height: 100%;
  width: 100%;
  position: relative;
  background-image: linear-gradient(
    to right,
    rgb(223, 219, 219),
    rgb(252, 252, 250)
  );
  cursor: pointer;
} /* Allows content to use full width and height of the headstone category div. Also styles the div. */

.grid-item-container2 {
  height: 100%;
  width: 100%;
  position: relative;
} /* Allows content to use full width and height of the headstone category div. Also styles the div. */

.grid-image-top2 {
  min-height: 375px;
  max-height: 575px;
  max-width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  background-position: 50% 50%;
  border-radius: 12px;
  margin: 5%;
  mix-blend-mode: multiply;
  cursor: pointer;
} /* Sets sizing and positioning of the images within the headstone category divs. 
This also removes the white background of each image (mix-blend-mode: multiply;) */ 

.grid-image-top2.lawn-memorials {
  background-image: url("https://www.kayparkmemorials.com/memorials/heartmemorials/images/heart2.jpg");
} /* Adds image to headstone category div for the lawn memorials */

.grid-image-top2.lawn-memorials2 {
  background-image: url("https://www.kayparkmemorials.com/memorials/heartmemorials/images/heart2.jpg");
} /* I WANT TO BE ABLE TO DISPLAY THE DIFFERENT IMAGES LIKE THIS */

.grid-image-top2.lawn-memorials3 {
  background-image: url("https://www.kayparkmemorials.com/memorials/heartmemorials/images/heart2.jpg");
} /* I WANT TO BE ABLE TO DISPLAY THE DIFFERENT IMAGES LIKE THIS */

.headstone-desc-box {
  padding: 5px;
  text-align: center;
  border-radius: 12px;
  background-color: linear-gradient(to right, rgb(223, 219, 219) , rgb(252, 252, 250));
}

.grid-item3:hover .grid-item-wrapper {
  padding: 1.5% 1.5%;
  margin: -1.5% -1.5%;
  background-color: linear-gradient(to right, rgb(223, 219, 219) , rgb(252, 252, 250));
} /* Adds the padding for when users hover over the headstone category div. 
Also adds gradient to the small extra space added within the padding */

.grid-item-content {
  padding: 0 20px 20px 20px;
} /* Adds padding to the text within the headstone category divs */

<!-- Portfolio Gallery Grid                       transform: scaleX(-1);-->
<div class="row">
  <div class="grid-row"> <!-- Start of div -->

<div class="grid-item3 show"> <!-- Start of div -->
    <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->      
        <div class="grid-item-wrapper"> <!-- Start of div -->
            <div class="grid-item-container2 column lawn"> <!-- Start of div -->
                <div class="grid-image-top2 lawn-memorials content"> <!-- Start of div -->
                    
                </div> <!-- End of div -->
            </div> <!-- End of div -->
        <div class="headstone-desc-box">
        <p><strong>TXC10 (LM)</strong><br><br>A gracefully sculpted Angel with prominent polished granite wings shown in Lavender Blue and Blue Pearl.</p>
        </div>
    </div> <!-- End of div -->
</div> <!-- End of div -->

<div class="grid-item3 show"> <!-- Start of div -->
    <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->      
        <div class="grid-item-wrapper"> <!-- Start of div -->
            <div class="grid-item-container2 column lawn"> <!-- Start of div -->
                <div class="grid-image-top2 lawn-memorials content"> <!-- Start of div -->
                    
                </div> <!-- End of div -->
            </div> <!-- End of div -->
        <div class="headstone-desc-box">
        <p><strong>TXC10 (LM)</strong><br><br>A gracefully sculpted Angel with prominent polished granite wings shown in Lavender Blue and Blue Pearl.</p>
        </div>
    </div> <!-- End of div -->
</div> <!-- End of div -->

<div class="grid-item3 show"> <!-- Start of div -->
    <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->      
        <div class="grid-item-wrapper"> <!-- Start of div -->
            <div class="grid-item-container2 column lawn"> <!-- Start of div -->
                <div class="grid-image-top2 lawn-memorials content"> <!-- Start of div -->
                    
                </div> <!-- End of div -->
            </div> <!-- End of div -->
        <div class="headstone-desc-box">
        <p><strong>TXC10 (LM)</strong><br><br>A gracefully sculpted Angel with prominent polished granite wings shown in Lavender Blue and Blue Pearl.</p>
        </div>
    </div> <!-- End of div -->
</div> <!-- End of div -->

</div> <!-- End of grid-row div-->
</div> <!-- End of row div -->

null

我之所以不只是更改当前的div类，是因为我将div保存在一个单独的文件中，该文件可以反复使用，如下所示：

<?php
    include 'grid-items/top-lawn.php';
?> <!-- This sets alls the divs for the grid items -->
  <p><strong>TXC10 (LM)</strong><br><br>A gracefully sculpted Angel with prominent polished granite wings shown in Lavender Blue and Blue Pearl.</p>
<?php
    include 'grid-items/bottom-lawn.php';
?> <!-- This sets alls the divs for the grid items -->

共有1个答案

公冶翰池

2023-03-14

我不知道我是不是理解对了...

据我所知，你可以这样做：

将相同的类'grid-item'通知给所有要以相同方式样式的divd
注意使用CSS中的样式的类

// css 
// has been .grid-item1|2|3|4 before
.grid-item {
  height: 100%;
  flex-basis: 20%;
  -ms-flex: auto;
  width: 100%;
  position: relative;
  padding: 0.75%;
  box-sizing: border-box;
}

// html
// use the above class instead of .grid-item1|2|3|4...
<div class="grid-item show"> <!-- Start of div -->
    <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->      
        <div class="grid-item-wrapper"> <!-- Start of div -->
            <div class="grid-item-container2 column lawn"> <!-- Start of div -->
                <div class="grid-image-top2 lawn-memorials content"> <!-- Start of div -->
                    
                </div> <!-- End of div -->
            </div> <!-- End of div -->
        <div class="headstone-desc-box">
        <p><strong>TXC10 (LM)</strong><br><br>A gracefully sculpted Angel with prominent polished granite wings shown in Lavender Blue and Blue Pearl.</p>
        </div>
    </div> <!-- End of div -->
</div> <!-- End of div -->


// .... ADD OTHER GRID ITEMS AS WELL ....

类似资料：

在for循环django模板的每个循环中生成唯一id

我需要在每个循环中生成唯一的id，而不是"城市选择" 我如何在这里生成它？我需要一些像这样的ID：输出：
php while循环变量，每三个div

问题内容：是while循环中为while循环中的每三个项目将变量分配给div中的类的一种方式。我使用的是蓝图结构，最后是第三个div，我需要在每个第三个div上附加一个“ last”类名，以便第3 div，第6 div，第9 div等？问题答案：这里的关键部分是。编辑：以下是对您的评论的回应。
R data.table生成每列的唯一值

我有一个data.table，我需要生成另一个data.table，它只列出每列的唯一值。一个例子: 从到实现这一点最有效的方法是什么？
PHP生成唯一订单号

本文向大家介绍PHP生成唯一订单号，包括了PHP生成唯一订单号的使用技巧和注意事项，需要的朋友参考一下在网上找了一番，发现这位同学的想法挺不错的，redtamo，具体的请稳步过去看看，我作简要概述，该方法用上了英文字母、年月日、Unix 时间戳和微秒数、随机数，重复的可能性大大降低，还是很不错的。使用字母很有代表性，一个字母对应一个年份，总共16位，不多也不少. 1. 生成效果： 2. 输出结果
PHP：如何生成一个随机的，唯一的字母数字字符串？

问题内容：如何使用数字和字母生成一个随机的，唯一的字符串以用于验证链接？就像您在网站上创建帐户一样，该帐户会向您发送一封包含链接的电子邮件，您必须单击该链接才能验证您的帐户…是的…其中之一。如何使用PHP生成其中之一？更新：刚刚记得。这是一个PHP函数，可根据当前时间（以微秒为单位）生成唯一标识符。我想我会用的。问题答案：如果您不需要它随着时间的流逝而变得绝对独特，请执行以下操作：否
如何从唯一字符串生成唯一int？

问题内容：我有一个带有String的对象，该对象具有唯一的id。（例如“ ocx7gf”或“ 67hfs8”），我需要为其提供int hascode（）的实现，该实现显然是唯一的。如何以最简单/最快的方式将字符串转换为唯一的int？ 10倍编辑-确定。我已经知道String.hashcode是可能的。但是不建议在任何地方使用。实际上’，如果不建议使用其他任何方法- 如果我的对象在集合中并且需

如何为每个div(php)生成唯一的类（循环）？

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档