CSS：刪除最後一個元素，在

Question

一行是我的問題：

我有東西在Flex容器名單，他們用同樣的顯示在屏幕下方 問題隔離器隔開，當你調整窗口的大小並使其變小，它們在不同的行上，我想擺脫位於行最後部分的分隔符，以便其餘部分很好地居中。

順便說一下，我試圖使用利潤率做分隔符，但後來我有問題集中在每個大小的div。

任何提示如何用CSS來實現？

這是我的代碼現在已經

@import "compass/css3"; 
 

 
.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -webkit-flex-flow: row wrap; 
 
justify-content: space-around; 
 
    align-items: center; 
 
    
 
} 
 

 
.flex-item { 
 

 

 
    padding: 5px; 
 
    margin-top: 10px; 
 
    min-width:100px; 
 
    line-height: 150px; 
 
    color: blaclk; 
 
    font-weight: bold; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
    opacity: 0.7; 
 
    
 

 
} 
 
.flex-item img{ 
 
    width: 100%; 
 
} 
 

 

 

 
.separator{ 
 
    background: rgb(127, 0, 0); 
 
    background: rgba(192,192,192,.5); 
 
    width: 1px; 
 
height: 100px; 
 

 

 
}

<div class="flex-container"> 
 
<div class="flex-item " ><center><p> 1 </p></center></div> 
 
    <div class="separator"></div> 
 
<div class="flex-item " ><center><p> 2 </p></center></div> 
 
    <div class="separator"></div> 
 
<div class="flex-item " ><center><p> 3 </p></center></div> 
 
    <div class="separator"></div> 
 
<div class="flex-item " ><center><p> 4 </p></center></div> 
 
</div>

Answer 1

純CSS我認爲這是非常困難的（除非您要使用的媒體查詢來定義可能在不同瀏覽器中變化的每一種情況），所以我建議在這裏使用js（jQuery）。看下面的例子。

創建一個函數separatorHandler()，檢查每個項目的頂部位置，如果它高於它在新行中的最後一個項目，則隱藏前一個分隔符，否則顯示前一個分隔符。

而且<center>不再在HTML5支持，只需使用一類像<div class="centered">用CSS text-align: center;

$(window).resize(function() { 
 
    separatorHandler(); 
 
}).trigger('resize'); 
 

 
function separatorHandler() { 
 
    var lastItemTop = $('.flex-item').first().position().top; 
 
    $('.flex-item').each(function() { 
 
    if ($(this).position().top > lastItemTop) { 
 
     lastItemTop = $(this).position().top; 
 
     $(this).prev('.separator').hide(); 
 
    } else { 
 
     $(this).prev('.separator').show(); 
 
    } 
 
    }); 
 
}

@import "compass/css3"; 
 
.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 

 
.flex-item { 
 
    padding: 5px; 
 
    margin-top: 10px; 
 
    min-width: 250px; 
 
    line-height: 150px; 
 
    color: blaclk; 
 
    font-weight: bold; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
    opacity: 0.7; 
 
} 
 

 
.flex-item img { 
 
    width: 100%; 
 
} 
 

 
.flex-item:nth-child(2n) { 
 
    background: red; 
 
} 
 

 
.separator { 
 
    background: rgb(127, 0, 0); 
 
    background: rgba(192, 192, 192, .5); 
 
    width: 5px; 
 
    height: 100px; 
 
} 
 

 
.centered { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="flex-container"> 
 
    <div class="flex-item "> 
 
    <div class="centered"> 
 
     <p> 1 </p> 
 
    </div> 
 
    </div> 
 
    <div class="separator"></div> 
 
    <div class="flex-item "> 
 
    <div class="centered"> 
 
     <p> 2 </p> 
 
    </div> 
 
    </div> 
 
    <div class="separator"></div> 
 
    <div class="flex-item "> 
 
    <div class="centered"> 
 
     <p> 3 </p> 
 
    </div> 
 
    </div> 
 
    <div class="separator"></div> 
 
    <div class="flex-item "> 
 
    <div class="centered"> 
 
     <p> 4 </p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

您可以使用nth-of-type()在每個休息點爲目標的元素和改變自己的風格。

它可能會更容易在這個筆來思考，我寫在手寫筆：https://codepen.io/sheriffderek/pen/53eda10aa154e6383be6be62ce324d95?editors=1100

但問題是，

...我不知道這個破發點，我的意思是它取決於寬度。我不 相當明白如何在這種情況下使用

在某些時候 - 在佈局的某些部分，你必須控制和做出決定。什麼是突破點，以及爲什麼這些是根據屏幕尺寸和內容更改佈局的正確時機。計算機和柔性盒真的很酷 - 但如果你不能建立一個邏輯系統供他們解釋 - 它們是毫無價值的。只要瀏覽器看起來「正確」，瀏覽器就無法決定何時在框上放置邊框。我知道這並不理想，但這正是我最終用於生產的原因 - 因爲沒有其他辦法。您可以使用JavaScript檢查列並應用類 - 但這仍然會像這樣。

.thing-list { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 
.thing { 
    flex-basis: 100%; 
} 
.thing:not(:last-of-type) { 
    border-bottom: 5px solid #00f; 
} 
@media (min-width: 700px) { 
    .thing { 
    flex-basis: 50%; 
    } 
    .thing:not(:last-of-type) { 
    border-bottom: 0; 
    } 
    .thing:nth-of-type(2n+1) { 
    border-right: 5px solid #800080; 
    } 
} 
@media (min-width: 1000px) { 
    .thing { 
    flex-basis: 25%; 
    } 
    .thing, 
    .thing:nth-of-type(2n+1) { 
    border-right: 5px solid #008000; 
    } 
    .thing:nth-of-type(4n + 4) { 
    border-right: 0; 
    } 
} 

Answer 3

如果你有興趣在純CSS的解決方案，我會建議使用:after僞類用於分隔符用於這一目的。然後:last-of-type和:nth-child用於刪除:after僞元素顯示的選擇器。

所以純CSS的解決方案 - 因爲你需要指定你需要的所有媒體查詢（但它的作品，當然）有點不切實際。使用JavaScript更容易。

CSS：

.flex-container { 
    display: flex; 
    /* ... */ 
    flex-flow: row wrap; 
} 

.flex-item { 
    display: block; 
    /* ... */ 
    position: relative; 
} 

.flex-item:after { 
    content: ""; 
    display: block; 
    background-color: white; 
    width: 2px; 
    height: 100%; 
    position: absolute; 
    right: -20px; 
    top: 0; 
} 

/* funny part */ 
.flex-item:last-of-type:after { 
    display: none; 
} 
@media (max-width: 365px) { 
    .flex-item:after { 
     display: none; 
    } 
} 
@media (min-width: 366px) and (max-width: 549px) { 
    .flex-item:nth-child(2n):after { 
     display: none; 
    } 
} 
@media (min-width: 550px) and (max-width: 727px) { 
    .flex-item:nth-child(3n):after { 
     display: none; 
    } 
} 

和HTML：

<div class="flex-container"> 
    <div class="flex-item"><p>Foo</p></div> 
    <div class="flex-item"><p>Bar</p></div> 
    <div class="flex-item"><p>Bar</p></div> 
    <div class="flex-item"><p>Bar</p></div> 
</div> 

這裏的工作小提琴：https://jsfiddle.net/9wrL5oeL/