要素が接触している部分のみを表示しますか？

Question

今、私はこの状況に陥っています。

それは今、すべての罰金ですが、より多くのコースを追加する可能性があります。 ラッパーはフレックスタイプですが、境界線は現在、.div：nth-​​child（1）の子2、3、4で行われます。だから問題は新しいものが追加されたときに手動でCSSを追加する必要があるときです。それは非常にまれですが、それは私にプロセスを自動的に行う方法があると思ったので、それは問題ではありませんか？

まず第三は、上と右と4を持って、下と右、左から2番目たと底部を有するあなたは、この基本的なグリッドを取得し、（それだけで根拠だ）あなたのニーズに適合させることができ

Answer 1

nth-childセレクタを使用してこれを行う方法の1つです。 4,5,6,7項目について以下のテストを行います。

.courses { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.course { 
 
    /* everything gets a border bottom */ 
 
    border-bottom: 2px solid #faca28; 
 
    box-sizing: border-box; 
 
    width: 50%; 
 
} 
 

 
/* left items get a right border */ 
 
.course:nth-child(odd) { 
 
    border-right: 2px solid #faca28; 
 
} 
 

 
/* no border bottom on the last one */ 
 
.course:nth-last-of-type(1) { 
 
    border-bottom: 0; 
 
} 
 

 
/* no border bottom on the second to last one IF it's odd.*/ 
 
.course:nth-last-of-type(2):nth-child(odd) { 
 
    border-bottom: 0; 
 
} 
 

 

 
/* demo only */ 
 
.courses { 
 
    color: #555; 
 
    margin-bottom: 100px; 
 
    font: 1.5rem sans-serif; 
 
} 
 
.course { 
 
    text-align: center; 
 
    padding: 50px; 
 
}

<div class="courses"> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
</div> 
 

 
<div class="courses"> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
</div> 
 

 
<div class="courses"> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
</div> 
 

 
<div class="courses"> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
    <div class="course">Course listing</div> 
 
</div>

Answer 2

を残し、トップました。基本的な考え方は、この線は実際には境界線ではなく、白いブロックの下にある色のdivの一部です。したがって、このように境界を適用する必要はありません。多くのブロックがあり、それぞれに境界線を適用したくない場合は、良いソリューションだと思います。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.outer { 
 
    background-color: red; 
 
    height: 412px; 
 
} 
 

 
.wrapper { 
 
    width: 100%; 
 
    height: 100px; 
 
    display: inline-block; 
 
    background-color: red; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    width: calc(50% - 3px); 
 
    display: inline-block; 
 
    background-color: white; 
 
} 
 

 
.item + .item { 
 
    margin-left: 2px; 
 
}

<div class="outer"> 
 
    <div class="wrapper"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </div> 
 
</div>

代わりに、あなただけの別の国境で4クラスを定義し、あなたのブロックに適用することができます。