2つのグループの要素を選択して共通の境界線を適用する方法は？

<div class="row"> 
     <div class="col-md-2"> 
      16 
      16 
     </div> 
     <div class="col-md-2"> 
      16 
      16 
     </div> 
     <div class="col-md-2"> 
      17 
      17 
     </div> 
     <div class="col-md-2"> 
      17 
      17 
     </div> 
     <div class="col-md-2"> 
      18 
      18 
     </div> 
     <div class="col-md-2"> 
      18 
      18 
     </div> 
    </div>

のようなボーダー2によるグループの要素を適用する要素を動的に生成される方法。どのように2つずつ2つにグループ化し、共通の境界線を適用するのですか？

出典

2017-05-29 jeeva

最後のペアは本当に少ないパディングを持っていますか？ – Swellar

いいえ、実際にはパディングはさらに – jeeva

です。最後のペアは残っているものよりもフィッターです – Swellar

あなたはそのような何かを試すことができ、:nth-child

.row { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 

 
.col-md-2 { 
 
    padding: 10px; 
 
    font-size: 20px; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid green; 
 
    list-style: none; 
 
    margin: 0; 
 
    background-color: red; 
 
} 
 

 
.col-md-2:nth-child(2n+1) { 
 
    border-left: 1px solid green; 
 
} 
 

 
.col-md-2:nth-child(2n) { 
 
    margin-right: 10px; 
 
    border-right: 1px solid green; 
 
} 
 

 
.col-md-2:nth-child(3), 
 
.col-md-2:nth-child(4){ 
 
    background-color: blue; 
 
}

<div class="row"> 
 
     <div class="col-md-2"> 
 
      16 
 
     </div> 
 
     <div class="col-md-2"> 
 
      16 
 
     </div> 
 
     <div class="col-md-2"> 
 
      17 
 
     </div> 
 
     <div class="col-md-2"> 
 
      17 
 
     </div> 
 
     <div class="col-md-2"> 
 
      18 
 
     </div> 
 
     <div class="col-md-2"> 
 
      18 
 
     </div> 
 
    </div>

出典

2017-05-29 06:46:29

あなたが好きな同様の要素にクラスを割り当てる必要があります：headタグの追加に続いて

<div class='red'></div>

：

<head> 
    <style> 
    .red{ 
     background-color:red;} 
    <style> 
</head>

あなたはCSSスタイルを見てみたいと思うかもしれません：https://www.w3schools.com/cssref/pr_background-color.asp

出典

2017-05-29 06:18:09 Leah

てみてくださいこのようなもの：

.bordered { 
 
    padding: 10; 
 
    display: inline-block; 
 
    border: 1px solid green; 
 
} 
 

 
.blue-pair > div { 
 
    background-color: blue; 
 
    display: inline-block; 
 
} 
 

 
.red-pair > div { 
 
    background-color: red; 
 
    display: inline-block; 
 
}

<div class="bordered blue-pair"> 
 
    <div>15</div> 
 
    <div>15</div> 
 
</div> 
 
<div class="bordered red-pair"> 
 
    <div>16</div> 
 
    <div>16</div> 
 
</div> 
 
<div class="bordered blue-pair"> 
 
    <div>17</div> 
 
    <div>17</div> 
 
</div>

出典

2017-05-29 06:23:57 Swellar

あなたはCSS3 nth-childセレクタを使用することができます使用して

div { 
 
    float: left; 
 
    text-align: center; 
 
    width: 20px; 
 
} 
 

 
div:nth-child(2n+1) { 
 
    margin-left: 10px; 
 
    border: 1px solid green; 
 
    border-right: none; 
 
} 
 

 
div:nth-child(2n) { 
 
    border: 1px solid green; 
 
    border-left: none; 
 
}

<div>A</div> 
 
<div>B</div> 
 
<div>C</div> 
 
<div>D</div> 
 
<div>E</div> 
 
<div>F</div>

出典

2017-05-29 06:28:43 anpsmn

純粋CSSにそのことはできないが、それは連続した要素を選択するフロアLESS又はSASS

等差数列のようなプリプロセッサである使用して達成することができる（n番目の子（N + 1/2））。

CSSセレクタnth-child（）は引数の端数を許可しません。ブラウザは、nth-child（n + 1/2）からnth-child（n + 1）を自動的に修正します。また、CSSにはフロア機能はありません。

出典

2017-05-29 07:18:06 Nasheeda

2つのグループの要素を選択して共通の境界線を適用する方法は？

答えて

関連する問題