iT邦幫忙

0

while 取的data搭配css時,while最後一筆的css客製?

  • 分享至 

  • xImage
  .swiper{
    vertical-align: top;
    width: 82%;
    display: inline-block;
    margin: 0px 0px 20px 20px;
    white-space: normal;
  }
<? while ($row = mysqli_fetch_array($sql)){?>
    <div class="swiper"></div>
<? }?>

當這個 while 的最後一筆時
最後那筆的 <div>swiper 我想要改變樣式
margin: 0px 0px 20px 20px; 改為 margin: 0px 20px 20px 20px;
但最後一筆之前的所有筆數都維持不變...
請問這能怎麼做?

ccutmis iT邦高手 2 級 ‧ 2018-09-17 13:51:39 檢舉
試試:
div.swiper{
vertical-align: top;
width: 82%;
display: inline-block;
margin: 0px 0px 20px 20px;
white-space: normal;
}
div.swiper:last-child {
margin: 0px 20px 20px 20px;
background-color:#f00;
}
火爆浪子 iT邦研究生 1 級 ‧ 2018-09-17 14:33:20 檢舉
TO ccutmis ~~~可以。
ccutmis iT邦高手 2 級 ‧ 2018-09-17 16:15:50 檢舉
good luck!
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
Luke
iT邦研究生 5 級 ‧ 2018-09-17 13:24:54

jQuery( ":last" )
Example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>last demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table>
  <tr><td>First Row</td></tr>
  <tr><td>Middle Row</td></tr>
  <tr><td>Last Row</td></tr>
</table>
 
<script>
$( "tr:last" ).css({ backgroundColor: "yellow", fontWeight: "bolder" });
</script>
 
</body>
</html>

或用程式判斷或...等多種方式

1
wolfwang
iT邦研究生 4 級 ‧ 2018-09-17 13:27:48

.swiper 加上 { margin: 0px 0px 20px 20px;}

新增一個 .last {margin-right: 20px} 到 css

在最後一筆的 class 加上 last,也就是 <div class="swiper last"></div>

我要發表回答

立即登入回答