CSS：賦予元素與「grandparent」元素相同的寬度

我有一個超容器（適合屏幕寬度，有邊距和填充），其中包含更寬的容器，反過來包含（對於冗餘抱歉）未確定的（DB-驅動）數量的左浮動框。它是Backbone/Underscore模板的一部分。CSS：賦予元素與「grandparent」元素相同的寬度

我想箱子與超級容器具有相同的寬度，以便一次只有一個可見（在骨幹視圖中有一個水平滾動功能）。我知道我可以使用jQuery來獲取超級容器的寬度並在渲染時將其應用於框，但我絕對會更喜歡純CSS解決方案以避免調整屏幕大小的問題。

爲了把事情說清楚：

HTML：

<div id="supercontainer"> 
    <div id="wide-container"> 
    <div class="fun-box"></div> 
    <div class="fun-box"></div> 
    <div class="fun-box"></div> 
    </div> 
</div>

CSS：

#supercontainer { 
    width:100%; 
    overflow:hidden; 
    margin:50px; 
} 

#wide-container { 
    display:table; 
} 

.fun-box { 
    height:100%; 
    float:left; 
    width: ???; /* something that makes it as wide as the supercontainer */ 
}

我怎麼能這樣做？

來源

2014-05-16 CedricLaberge

爲什麼顯示：表？一個孩子如何能比父母更寬？ –

寬度：100％，但顯示：表格不會給你你想要的結果。你爲什麼使用它？ – haxtbh

「我希望箱子的寬度與超級容器的寬度相同，以便只有一個可見」 - 每個箱子將具有超級容器的寬度，並且每次只有一個可見。 –

如果#supercontainer總是具有100%寬度的窗口，則可以通過施加width: 100vw用於限定的長度相對於視口的大小的框

.fun-box { 
    height:100%; 
    float:left; 
    width: 100vw; 
}

視口百分比長度匹配它，也就是文檔的可見部分。

1vw = 1 /第100次視口的寬度的

- MDN

來源

2014-05-16 16:41:01

我從來沒有聽說過它，但它的作品花錢！謝謝！ – CedricLaberge

可以嘗試使.fun-box#wide-container的寬度的三分之一，並#wide-container三次#supercontainer：

#wide-container { 
    width: 300%; 
} 
.fun-box { 
    width: 33.33%; 
}

Demo

來源

2014-05-16 16:54:38 Oriol

CSS：賦予元素與「grandparent」元素相同的寬度

回答

相關問題