Question

我正在尝试创建一些可以在div中创建备用行的CSS。我的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>

我的CSS是：

#wrapper-new {
    width: 100%;
}

#record-section {
    width: 100%;
    height: 100%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
    display: flex;
    align-items: center;
    max-height: 100%;
    min-height: inherit;
}

#head-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    max-height: 100%;
    min-height: inherit;
    background-color: #FFFFFF;
}
#topline {
    background-repeat: repeat-x;
    height: 5px;
    background-color: #000033;
}
#temp-section {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1vw;
    color: #FC0;
    display: flex;
    align-items: center;
    width: 10%;
}
#time-section {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.9vw;
    color: #333;
    display: flex;
    align-items: center;
    width: 10%;
}
#remarks-section {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.9vw;
    color: #FC0;
    width: 25%;
}

#flight-number-section {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.9vw;
    color: #FC0;
    width: 10%;
}
.responsive img {
    width: 80%;
    max-width: 100%;

}
#airport-name {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.9vw;
    color: #333;
    width: 25%;
}
#terminal-section {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.9vw;
    color: #333;
    width: 10%;
}

#time-div {
    display: inline-block;
    width: 20%;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.8vw;
    font-weight: bold;
    color: #006;
    padding-left: 5px;
}



#board-header {
    display: inline-block;
    display: flex;
    align-items: center;
    width: 60%;
    min-width: 60%;
}
#board-header-text {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 3vw;
    font-weight: bold;
    color: #006;
    display: inline-block;
    text-align: center;
    display: flex;
    align-items: center;
    margin-left: 25%;
}



#logo-image-section {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 20%;
    min-width: 20%;
    float: right;
}

任何人都可以指出如何最好地解决这个问题。

非常感谢你的时间。

Answer 1

这样的东西？如果你共享你的html结构会有所帮助。

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

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

Answer 2

这是使用div的演示。不需要在每个＆＃34;单元格＆＃34;上，只需要在代表一行的包含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>

Answer 3

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

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

即使您想要交替使用相反的列，也可以替换奇数。

这是更新fiddle的链接。

动态生成的div中的备用颜色行

3 个答案: