CSS：如何定義響應列之間的間距

我需要爲項目提供一個接口，其中編輯器可以用一些變量定義容器元素：他/她應該能夠定義有多少列，以及他們表現在不同的屏幕尺寸。CSS：如何定義響應列之間的間距

爲此，我使用了一個網格框架（這裏是：PureCSS響應網格），讓他/她選擇給定列的給定屏幕大小的列大小。因此，可以定義在屏幕大小「大」時，在該行打開到下一行之前，該行中應該有兩列還是三列。

我解釋這不是因爲它的技術部分，而是因爲我因爲它而陷入困境。

這種情況是，頁面佈局需要在這些列之間填充，而不是在行的外側填充。

我想解決這個問題，在使用的框架的頂部使用一些CSS規則的定製，這很好 - 只要它是一行不換行到下一行。當屏幕寬度較小時，它會像應該那樣包裹，但是填充不再以這種方式工作。

你知道我該如何解決這個問題嗎？記住它應該包含適用於「自動」的規則，而不需要依賴額外的CSS類？

我做了一個小提琴演示我的問題。編輯器不必爲每個屏幕大小定義填充，因爲他已經爲其定義了列大小。填充應該以這種方式「自動」工作。

<style> 
    /* Using SCSS for convenience */ 
    body { 
     padding: 1em; 
    } 

    .pure-g { 
     margin-bottom: 1em; 

     > div { 
     border: thin solid black; 
     box-sizing: border-box; 
     padding: 0 .5em 1em .5em; 

     &:first-child { 
      padding-left: 0; 
      padding-right: .66em; 
     } 

     &:last-child { 
      padding-left: .66em; 
      padding-right: 0; 
     } 

     > div { 
      box-sizing: border-box; 
      height: 10em; 
      background-color: green; 
     } 
     } 

     &[data-cols="3"] { 
     > div:nth-child(2) { 
      padding-left: .33em; 
      padding-right: .33em; 
     } 
     } 

     &[data-cols="4"] { 
     > div:nth-child(2) { 
      padding-left: .33em; 
     } 

     > div:nth-child(3) { 
      padding-right: .33em; 
     } 
     } 
    } 
</style> 

<div class="pure-g" data-cols="3"> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1 pure-u-lg-1-3"><div></div></div> 
</div> 

<div class="pure-g" data-cols="4"> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div></div></div> 
</div> 

<div class="pure-g" data-cols="5"> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1 pure-u-lg-1-5"><div></div></div> 
</div>

的什麼，我到目前爲止做一個簡短的解釋：

機構應具有填充，所以列不碰頁面邊框。有人可能會爭辯說，這可以由列來處理，但在我的實際情況中還有更多：容器寬度受限，而不是主體。
列之間應該總是有1em的填充，而底部應該有1em的餘量。
爲了製作相同內部大小的列，我必須稍微調整填充：由於沒有外部填充的事實，第一列和最後一列需要調整其填充，與它們的填充相同，重新觸摸。我想你會明白我的意思。
（邊框和內格只是以可視化的東西）

https://jsfiddle.net/1jv43g02/

感謝您的幫助

阿恩

來源

2016-09-30 arnekolja

我不明白這一點，如果你想在任何時間之間的一個EM ，.33和.66是什麼？只需保留它.5：https：// jsfiddle。net/1jv43g02/1/- 小提琴只能在最大的屏幕上有3,4和5行，因爲我不確定你的樣式表中有哪些樣式會影響較小的屏幕 – Pete

以[Twitter自舉（http://getbootstrap.com/）。 Collumns具有相同的右和左填充'padding：0 20px;'和rows將通過'margin：0 -20px;'填充所需填充的容器的行。 – AlexG

@Pete：當不存在只有一邊填充項的項目時，項目將被填充正確，但不具有相同的內部大小。 – arnekolja

從評論：

拿一個例子在Twitter Bootstrap。列具有相同的左右填充padding: 0 20px;和行會通過margin: 0 -20px;否定該填充導致該行填補了容器所需100％

來源

2016-09-30 13:41:29 AlexG

CSS：如何定義響應列之間的間距

回答

相關問題