2013-08-06 99 views
6
  • 集裝箱#666margin: 20px; overflow: hidden;
  • 節點#333margin: 20px 0 0 20px; float: left;

實施例,http://jsbin.com/owejal/3/edit或圖片:使容器中的元素容器具有邊緣而不是容器?

double margin

然而,預期的結果是:

  • 與20像素餘量容器,
  • 兒童在中間20像素餘量,但不是與容器。

enter image description here

這可以使用負填充來實現(即,如果容器具有padding: -20px 0 0 -20px),儘管這樣的東西是不存在。

想要的結果可以使用額外的元素(http://jsbin.com/owejal/4/)來實現,儘管我很想知道是否只有CSS解決方案。

+0

是各種寬度的'。集團'容器是你想要解釋的嗎?例如,總是會有3個以下的元素和4個以上的元素?或者你更喜歡這個在飛行中適應? –

+0

子元素的數量及其維度事先未知。 – Gajus

+2

據我所知,這不能在純css中完成,因爲沒有辦法讓css知道孩子什麼時候會換行到新行 – Muleskinner

回答

-1

下面的CSS會得到你想要的結果,其實你仍然有2個限制:

  1. 如果改變身體的背景下,你需要更新元素的邊框顏色包含.foo
  2. 內部節點仍然有右邊距,這也是您想要的結果屏幕截圖(.group可以有5個節點,但在此解決方案中只有4個)。
.group { 
    overflow: hidden; 
    margin: 20px; /* margin is required */ 
    background: #666; 
} 
.node { 
    width: 100px; 
    height: 100px; 
    float: left; 
    background: #333; 
    margin: 0px 20px 20px 0px; 
} 
.foo { 
    height: 20px; 
    background: #00f; 
    margin: 20px; 
} 
.group + .foo { 
    height: 20px; 
    background: #00f; 
    margin: 20px; 
    position: relative; 
    top:-40px; 
    border-top: 20px solid #fff; 
} 

你仍然可以找到解決辦法here

+0

此解決方案已經是問題的一部分。見最後一段。此外,它說「沒有額外的元素」。 – Gajus

1

因爲你沒有提到可調整大小的要求,你可以簡單的使用n個子聲明也喜歡在這裏:

http://jsbin.com/owejal/51/

但是,此解決方案針對父容器的固定寬度進行了優化,因此總是應該有4個元素舉例來說,儘管如此,它只是CSS。

4

這是一個小黑客,但如何隱藏頂部和左邊緣區域與一些戰略性放置僞元素? http://jsfiddle.net/SUJtd/

.foo {height:20px; background:#00f; margin:20px 20px 0;} 

.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;} 
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;} 
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;} 

.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;} 
5

如果你只關心元素之間的間距,則可以放棄僞元素。這只是背景。

http://codepen.io/cimmanon/pen/mucDv

<div class="foo"></div> 
<div class="group"> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
</div> 
<div class="foo"></div> 

的CSS:

.group { 
    overflow: hidden; 
    margin: -10px 0 -10px 10px; 
    padding-right: 10px; 
    position: relative; 
} 

.group:before { 
    display: block; 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    top: 10px; 
    right: 20px; /* 20px instead of 10px due to padding */ 
    bottom: 10px; 
    left: 10px; 
    background: #666; 
} 

.node { 
    width: 100px; 
    height: 100px; 
    float: left; 
    background: #333; 
    margin: 10px; 
} 

.foo { 
    height: 20px; 
    background: #00f; 
    margin: 20px; 
} 
2

沒有多餘的HTML標記 - 但一類變化& 無僞元素

一個簡單的技巧這可能應該工作爲你: http://jsbin.com/owejal/65/edit

截圖:

enter image description here

將與節點:)的所有可能的數工作

<div class="foo"></div> 
    <div class="group"> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    </div> 
    <div class="foo2"></div> 

CSS:

.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; } 
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ } 
.foo { height: 20px; background: #00f; margin: 20px;} 
.foo2{ 
    height:20px; 
    background:#00f; 
    border-top:20px solid white; 
    margin:20px; 
    margin-top:-20px; 
} 
+0

如果容器大小調整爲恰好*適合一定數量的孩子,則右側有20px的間隔。我不知道這是OP想要避免的事情。另外,模擬祖先背景的白色邊框只有在純色(即沒有bg圖像)時纔會起作用。 – cimmanon

+0

這裏沒有使用圖像..只是說!在右邊的差距是沒關係,我認爲從預期的截圖 – AdityaSaxena