satır satırları

Question

yalnızca saf css !!

4 sütunda görüntülenen öğeler içeren sargıya sahip bir esnek kap olarak kullanılan bir div öğem var. Bu konteynerin içindeki satırlar arasında çizgiler göstermem gerekiyor.

İçindeki esnek öğelerin her biri için border-bottom özelliğini ayarlıyorum, ancak bu, son satırın satırının o satırdaki öğeleri almasını sağlar.

Konteynırdaki son elemanın, satırın sonuna kadar genişliğini büyütmeden çizgiyi görüntülemesinin bir yolu var mı? Ya da bununla ilgilenecek başka bir fikir var mı?

not: Kapsayıcıdaki öğeler miktarı dinamik, bu yüzden son satırda kaç tane öğe olduğunu bilmiyorum.

html

<div id="container"> 
<div class="element"> 
    <div class="content"> 
    </div> 
</div> 
<div class="element"> 
    <div class="content"> 
    </div> 
</div> 
.... 
</div> 

css

#container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.element { 
    flex: 0 0 25%; 
    border-bottom: 1px solid green; 
} 

.content { 
margin: 10px; 
border: 3px solid green; 
background-color: yellow; 
height: 30px; 
} 

demo keman: https://jsfiddle.net/sfhLw1dh/

teşekkür ederiz!

Answer 1

Orada bir hiledir veya benzeri dersen onu kesmek:

.element için #container ve margin-bottom: -1px; için border-bottom: 1px solid green; ver.

#container { 
    display: flex; 
    flex-wrap: wrap; 
    border-bottom: 1px solid green; 
} 

.element { 
    flex: 0 0 25%; 
    border-bottom: 1px solid green; 
    margin-bottom: -1px; 
} 

Fiddle

Answer 2

bir konuma sözde eleman bu da yönetmek olabilir:

#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    overflow: hidden; 
 
} 
 
.element { 
 
    flex: 0 0 25%; 
 
    border-bottom: 1px solid green; 
 
    position: relative; 
 
} 
 
.element:last-child:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 100%; 
 
    height: 0; 
 
    border-bottom: inherit; 
 
    /* Look it's automatic */ 
 
    width: 2000px; 
 
    /* or some really large value */ 
 
} 
 
.content { 
 
    margin: 10px; 
 
    border: 3px solid green; 
 
    background-color: yellow; 
 
    height: 30px; 
 
}

<div id="container"> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
</div>