頂行的底部可以絕對定位而不包裝？

有一個具有背景圖像和幾個塊的容器，我試圖實現下面的佈局。也就是說，顯示行中的塊，以便第一行的底部與固定值y對齊。無論其內容如何，同一行上的所有列都應該（顯示爲）具有相同的高度。這將是微不足道的通過把塊A和B一起在一個包裹元素來實現，但我很好奇，如果它可以在沒有完成，只有這些元素：頂行的底部可以絕對定位而不包裝？

<div id="container"> 
 
    <div id="A"> 
 
    <p>A1</p> 
 
    </div> 
 
    <div id="B"> 
 
    <p>B1</p> 
 
    <p>B2</p> 
 
    </div> 
 
    <div id="C"> 
 
    <p>C1</p> 
 
    </div> 
 
    <div id="D"> 
 
    <p>D1</p> 
 
    <p>D2</p> 
 
    </div> 
 
    <div id="E"> 
 
    <p>E1</p> 
 
    </div> 
 
</div>

到目前爲止我嘗試應用transform: translateY(-100%)至A和B，但在它們和以下塊之間留下空隙。如果我可以以某種方式獲得A，B和C以保持它們的寬度在同一行上，那麼我可以以這種方式移動A和B，但它與Flexbox戰鬥。

該解決方案不一定是基於flexbox的，儘管我確實希望不要太冒昧。

來源

2017-03-10 Thijs van Dien

下面是CSS電網解決方案吧。您可能需要按照您的要求玩一下行和列。

* { 
 
\t \t \t box-sizing: border-box; 
 
\t \t \t font-family: sans-serif; 
 
\t \t \t font-size: 20px; 
 
\t \t \t font-weight: bolder; 
 
\t \t \t color: #484848; 
 
\t \t } 
 
\t \t body { 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t } 
 

 
\t \t div { 
 
\t \t \t min-height: 100px; 
 
\t \t \t background-color: rgba(0,0,0,0.1); 
 
\t \t } 
 

 
\t \t p { 
 
\t \t \t margin: 0; 
 
\t \t \t text-align: center; 
 
\t \t } 
 

 
\t \t #A { 
 
\t \t \t grid-area: areaA; 
 
\t \t \t background-color: cadetblue; 
 
\t \t } 
 
\t \t #B { 
 
\t \t \t grid-area: areaB; 
 
\t \t \t background-color: darksalmon; 
 
\t \t } 
 
\t \t #C { 
 
\t \t \t grid-area: areaC; 
 
\t \t \t background-color: beige; 
 
\t \t } 
 
\t \t #D { 
 
\t \t \t grid-area: areaD; 
 
\t \t \t background-color: bisque; 
 
\t \t } 
 
\t \t #E { 
 
\t \t \t grid-area: areaE; 
 
\t \t \t background-color: darkseagreen; 
 
\t \t } 
 

 
\t \t /* Adjust the padding in acordance with the height of 'A' and 'y' */ 
 
\t \t #container { 
 
\t \t \t display: grid; 
 
\t \t \t grid-template-columns: 25% 25% 25% 25%; 
 
\t \t \t grid-template-rows: auto; 
 
\t \t \t grid-template-areas: 
 
\t \t \t "areaA areaB . ." 
 
\t \t \t "areaC areaC areaC areaC" 
 
\t \t \t "areaD areaD areaE areaE"; 
 
\t \t \t grid-column-gap: 16px; 
 
\t \t \t grid-row-gap: 16px; 
 
\t \t \t padding-top: 100px; 
 
\t \t } 
 

 
\t \t p { 
 
\t \t \t width: 100%; 
 
\t  position: relative; 
 
\t  top: 50%; 
 
\t  transform: translate3d(0,-50%,0); 
 
\t \t }

<div id="container"> 
 
    <div id="A"> 
 
    <p>A</p> 
 
    </div> 
 
    <div id="B"> 
 
    <p>B</p> 
 
    </div> 
 
    <div id="C"> 
 
    <p>C</p> 
 
    </div> 
 
    <div id="D"> 
 
    <p>D</p> 
 
    </div> 
 
    <div id="E"> 
 
    <p>E</p> 
 
    </div> 
 
</div>

來源

2017-03-10 05:56:21 Sid

我很欣賞你的答案，但瀏覽器的支持是如此糟糕，它不是在這個時候一個現實的解決方案。 –

頂行的底部可以絕對定位而不包裝？

回答

相關問題