Css 动态生成的div中的交替颜色行_Css

Css 动态生成的div中的交替颜色行

css

Css 动态生成的div中的交替颜色行,css,Css,我正在尝试创建一些CSS，以在div中生成备用行。根据查询结果，我的div行是动态的如果我使用的是表结构，我知道如何做到这一点，但我想远离表我读过很多关于如何实现这一点的方法，但所有的例子都使用硬编码结构我的HTML结构是： <div id="wrapper-new"> <?php if(empty($row_fids['Flight'] )){ ?> <div align="center"><img src="images/awaiting.gi

我正在尝试创建一些CSS，以在div中生成备用行。根据查询结果，我的div行是动态的

如果我使用的是表结构，我知道如何做到这一点，但我想远离表

我读过很多关于如何实现这一点的方法，但所有的例子都使用硬编码结构

我的HTML结构是：

<div id="wrapper-new">
<?php if(empty($row_fids['Flight'] )){ ?>
<div align="center"><img src="images/awaiting.gif" border="0" /></div>

<?php }elseif(!empty($row_fids['Flight'])) { 
 do { ?>

<div id="record-section">
<div id="time-section">
<?php print date("H:i", strtotime($row_fids['ScheduleTime']));?>
</div>
<div id="flight-number-section">
<?php print $row_fids['Flight']; ?>
</div>
<div class="responsive">
<img src="../../../../<?php echo $row_fids['AirlineLogoUrlPng']; ?>">
</div>
<div id="airport-name">
<?php print $row_fids['AirportName'];?>
</div>
<div id="temp-section">
<?php if(!empty($row_fids['TemperatureC'])) { echo   $_row_fids['TemperatureC']." &deg;C"; }?>
</div>
<div id="remarks-section">
<?php print $row_fids['RemarksWithTime']; ?>
</div>
<div id="terminal-section">
<?php print $row_fids['Terminal']; ?>
</div>
</div>
</div>

<?php 
} while ($row_fids = mysql_fetch_assoc($fids)); 
}
?>
</div>

谁能给我一个如何最好地解决这个问题的指针

非常感谢您抽出时间。

像这样的事吗？如果您共享您的html结构，这将有所帮助

div:nth-child(odd){
  background-color: red;
}

div:nth-child(even){
  background-color: blue;
}

如果您希望根据JSFIDLE替换div的颜色，我建议您这样做

#record-section > div:nth-child(odd) {
 background-color:red;
}

如果要交替使用相反的列，也可以将奇数替换为偶数

这里有一个链接到已更新的

下面是一个使用div的演示。不需要在每个“单元”上都有一个类，只需要在表示行的包含div上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
<style type="text/css">
.table {
    width: 300px;
}
.table span {
    display: inline-block;
    width: 30%;
    border: 1px solid white;
}
.row:nth-child(odd) {
    background-color: blue;
}
.row:nth-child(even) {
    background-color: green;
}
</style>
</head>
<body>
<div class="table">
    <div class="row">
        <span>stuff</span>
        <span>stuff</span>
        <span>stuff</span>
    </div>
    <div class="row">
        <span>stuff</span>
        <span>stuff</span>
        <span>stuff</span>
    </div>
    <div class="row">
        <span>stuff</span>
        <span>stuff</span>
        <span>stuff</span>
    </div>
    <div class="row">
        <span>stuff</span>
        <span>stuff</span>
        <span>stuff</span>
    </div>
</div>
</body>
</html>


一些头衔
.桌子{
宽度：300px；
}
.工作台跨度{
显示：内联块；
宽度：30%；
边框：1px纯白；
}
.行：第n个孩子（奇数）{
背景颜色：蓝色；
}
.行：第n个子项（偶数）{
背景颜色：绿色；
}
东西
东西
东西
东西
东西
东西
东西
东西
东西
东西
东西
东西

您好，非常感谢您的回复。您可以使用fiddle更新，但它会提供备用列。我要找的是div行上的替代颜色，它是从查询到数据表的动态生成的。我已经在问题中包括了HTML和CSS，谢谢。为什么不使用表呢？您正在将数据制成表格。@Andy G我正在尝试使用div来摆脱表格和代码。你是说这不能只用div来完成吗？不，这是可以做到的，但是表格是用来显示表格数据的。人们被鼓励为了布局而避免使用表格，但许多人将其误解为“完全避免使用表格”。你能发布HTML代码吗？（不是PHP代码）如果我正确解释了他的代码，

#record section

会重复，在这种情况下，他的所有ID都会重复。非常感谢，这正是我想要的。你的丈夫。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
<style type="text/css">
.table {
    width: 300px;
}
.table span {
    display: inline-block;
    width: 30%;
    border: 1px solid white;
}
.row:nth-child(odd) {
    background-color: blue;
}
.row:nth-child(even) {
    background-color: green;
}
</style>
</head>
<body>
<div class="table">
    <div class="row">
        <span>stuff</span>
        <span>stuff</span>
        <span>stuff</span>
    </div>
    <div class="row">
        <span>stuff</span>
        <span>stuff</span>
        <span>stuff</span>
    </div>
    <div class="row">
        <span>stuff</span>
        <span>stuff</span>
        <span>stuff</span>
    </div>
    <div class="row">
        <span>stuff</span>
        <span>stuff</span>
        <span>stuff</span>
    </div>
</div>
</body>
</html>