在列之間設置邊距

我們有3列（有人想要更多也許）在列之間設置邊距

可以說我想要它們之間30px的距離。

這將意味着我需要創建3種不同的樣式：

第一欄：margin-right:15px
中心柱：margin-right:15px;margin-left:15px;
最後一欄：margin-left:15px;

也許它不是很複雜但它相當不舒服，特別是當需要一些WordPress的等最終用戶可能沒有HTML背景。

這是fiddle。

是否有可能以簡單的方式實現這一點？

來源

2012-12-11 user1576183

你可以有

HTML

<div class="margin-right"> 
<div class="margin-left margin-right"> 
<div class="margin-left">

CSS

.margin-left { margin-left: 15px } 
.margin-right { margin-right: 15px }

來源

2012-12-11 21:41:08 raycchan

是的，的確，這仍然是3種不同的風格。我想爲他們設置一些班級，爲他們設置一些班級，並管理所有其他班級。用js也許？ – user1576183

有一個簡單的解決方案（jsFiddle），不需要你使用2類是：

.col-gutter { 
    padding-right: 20px; 
} 

.col-gutter:last-of-type { 
    padding-right: 0; 
}

你可以設置排水溝大小，你需要使用一個單獨的類

更新（IE8）

無論大小，如果你想支持至少IE8你也可以使用這樣的：

.col-gutter { 
    padding-left: 20px; 
} 

.col-gutter:first-child { 
    padding-left: 0; 
}

來源

2012-12-11 21:49:15 mfreitas

'last-of-type'：舊版瀏覽器不支持（IE <9） –

@PranavKapoor他沒有提及跨瀏覽器.. – mfreitas

是的，我沒有。但它會很好:) – user1576183

你總是可以用下面的方法（3列布局）：

.onethird { 
    width: 30%; 
    margin-left: 5%; 
    float: left; 
} 
.onethird:first-child { 
    float: left; 
    margin-left: 0; 
} 
.onethird.third { 
    float: right; 
}

只需將它包裝在一個續確保你清除漂浮物。

這裏是更新了自己的提琴：http://jsfiddle.net/kFeFj/23/

來源

2012-12-11 22:05:00

嘗試一個容器元素

http://jsfiddle.net/5JZGt/上切緣陰性（該演示展示了多個盒子）

一些HTML：

<div class="container"> 
    <div class="child"> 

    </div> 

    <div class="child"> 

    </div> 

    <div class="child"> 

    </div> 
</div>

CSS：

.container { 
    margin: -10px 0 0 -10px; 
} 

.container .child { 
    width: 100px; 
    height: 100px; 
    background: red; 
    margin: 10px 0 0 10px; 
    float: left; 
}

您可以免去.child課程，只需參考div或您正在使用的任何元素。

來源

2012-12-11 22:20:53 cimmanon

不錯的訣竅:)我會檢查並讓知道。 – user1576183

在列之間設置邊距

回答

相關問題