CSS：使用divider元素的響應式佈局變得不成比例？

我有一個響應式佈局，但工作正常，但我的問題是，當我在我的頁面中添加一個簡單的divider元素時，一切都會遍佈整個地方。CSS：使用divider元素的響應式佈局變得不成比例？

這是一個工作FIDDLE

如果你伸展頁的小提琴一樣多，你可以，你會看到這個問題。

的問題是，從這個元素：<div class="divider"></div>

如果刪除元素，一切工作再次罰款，但我需要一個分離元件和我想不通，爲什麼這種情況發生！

這是我的全部代碼：

/* imports */ 
@import url(http://fonts.googleapis.com/css?family=Lobster); 
/* resets */ 
*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 
.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 


/* global */ 

.wrapper { 
    margin: 0 auto; 
    padding: 20px; 
    max-width: 95%; 
    background-color: #fff; 
} 
h1 { 
    font-family: "Lobster", cursive; 
    font-size: 1.3em; 
    margin-bottom: 10px; 
    background-color:#000; 
    color:#FFF; 
    padding:10px; 

} 
h2 { 
    font-weight: 700; 
} 

/* grid */ 
[class*="row-"] { 
    margin-bottom: 20px; 
} 
[class*="row-"]:last-child { 
    margin-bottom: 0; 
} 
[class*="col-"] { 
} 

@media all and (min-width: 768px) { 

    /* all cols margin */ 
    [class*="col-"] { 
    margin-right: 20px; 
    } 
    [class*="col-"]:last-child { 
    margin-right: 0; 
    } 

    /* make the columns responsive */ 
    .col-1-2 { 
    float: left; 
    width: 50%; 
    } 
    .col-1-4 { 
    float: left; 
    width: 25%; 
    border-left: 1px dotted #e46a10; 
    padding:10px; 
    } 
    .col-1-8 { 
    float: left; 
    width: 25%; 
    } 

    /* 2 span rows */ 
    .row-2 { 
    padding-left: 20px; 
    } 
    .row-2 [class*="col-"]:first-child { 
    margin-left: -20px; 
    } 

    /* 4 span rows */ 
    .row-4 { 
    padding-left: 60px; 

    } 
    .row-4 [class*="col-"]:first-child { 
    margin-left: -60px; 
    } 

    /* 8 span rows */ 
    .row-8 { 
    padding-left: 60px; 
    } 
    .row-8 [class*="col-"]:nth-child(4n+1) { 
    margin-left: -60px; 
    } 
    .row-8 [class*="col-"]:nth-child(5n-1) { 
    margin-right: 0; 
    } 
    .row-8 [class*="col-"]:nth-child(6n-1) { 
    clear: both; 
    } 

} 


@media all and (min-width: 1200px) { 

    /* adjust width */ 
    .col-1-8 { 
    float: left; 
    width: 12.5%; 
    } 

    /* 8 span rows */ 
    .row-8 { 
    padding-left: 140px; 
    } 
    /* reset these... */ 
    .row-8 [class*="col-"]:nth-child(4n+1) { 
    margin-left: 0; 
    } 
    .row-8 [class*="col-"]:nth-child(5n-1) { 
    margin-right: 20px; 
    } 
    .row-8 [class*="col-"]:nth-child(6n-1) { 
    clear: none; 
    } 
    /* and add this */ 
    .row-8 [class*="col-"]:nth-child(1) { 
    margin-left: -140px; 
    } 

} 


.divider{ 
display:inline-block; 
    width: 100%; 
border-bottom: 1px dotted #ccc; 

}

可能有人請告知這個問題？

來源

2016-08-03 Jackson

只需將分頻器，而不是在它之後'.row-4 clearfix'，它工作正常 – shwarp

@shwarp，我知道，但我需要的是關口後-4而不是.row這是容器... – Jackson

，你可以添加另一個容器嗎？圍繞你的cols，並把分隔符放在它之後？因爲你的問題是由於浮動：左上角 – shwarp

如果無法放置.divider外.row-4容器，那麼你可以只邊框添加到.row-4 DIV本身並刪除.divider一起。

CSS

.row-4 { 
    border-bottom: 1px dotted #ccc; 
    padding-bottom: 15px; 
}

結果

JSFiddle

來源

2016-08-03 16:27:08

分配器有一個目的。它假設每四分之一分。向容器添加邊框不會給我所需的結果。 – Jackson

@Jackson，我會再看一遍，並嘗試找到適合您要求的解決方案。 –

@傑克遜，我已經準備好了flexbox解決方案，但它確實改變了大量的代碼，但它也使它更清潔，更高效。是您感興趣的flexbox解決方案嗎？ https://jsfiddle.net/onjL7kn4/8/ –

我想我找到了問題，那就是：

[class*="col-"]:last-child { 
    margin-right: 0; 
}

由於沒有最後孩子css類，該代碼發生在現實中的最後一個div在.row容器，所以在這種情況下，它需要.divider！

因此，如果可以，只需更改分隔符的標籤，例如section！

或代替:last-child，使用:nth-child(n)

來源

2016-08-03 16:57:18 shwarp

好的趕上！這絕對是問題！ +1 https://jsfiddle.net/onjL7kn4/9/ –

CSS：使用divider元素的響應式佈局變得不成比例？

回答

相關問題