如何在Css中添加每個div的第一個元素的右邊框（引導程序）

Question

我有一個頁面，其中每行三個圖像在桌面上，兩個在手機上。我想爲桌面和移動視圖中的第一個圖像添加前兩個圖像的邊界右側。

但我不能。

我從數據庫獲取數據/圖像，它可以是20 - 30每頁。 這是我的HTML代碼：

<div class="col-xs-12 col-sm-12 col-md-12 " > 
<?php 
$sql = "SELECT * FROM `mytable` ORDER BY `id` "; 
$result = mysql_query($sql) or die('couln not select query'); 
while($row= mysql_fetch_array($result)){ 

?> 
<form id="mainMenuItem" action ="#" method="post"> 
<div class="col-xs-6 col-sm-6 col-md-4" style="border:1px solid gray; "> 
<a href="#"> 
<div id="imgProDetail" class="img-responsive"> 
<div class="proImg"> 
**<img src="<?=$row['imgurl']?>**" class="img-responsive cat-img"> 
</div> 
<div class="proName"> 
<h1 style="text-align:center" class="cat-name">**<?=$row['catName']?**> </h1> 
</div>  
</div> 
</a> 
</div> 

</form> 
<?php }; ?> 
</div> 

我希望它會顯示這樣的： enter image description here

如何做到這一點吧。

任何人都可以幫忙請。

Answer 1

嘗試.element:first-child和.element:nth-child(2)移動設備使用媒體查詢