CSS網格和內聯塊設計問題

Question

我使用CSS網格進行了博客設計，使用了內聯塊將DIV打包在一起。

在我的博客中，我要在高度為120的文本DIV旁邊顯示2個高度為60的圖片DIVS。在文本旁邊僅顯示第一張圖片。

為什么第二張圖片顯示在文本下方，請獲得一些有關如何解決此問題的指導。

 .GridCont { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "content content content content" "content content content content" "content content content content"; } .PostContent { grid-area: content; background: #B8E986; } .Content { background: #000000; width: 35%; color: white; display: inline-block; } .box1 { height: 120vh; } .PicContent { background: blue; color: white; display: inline-block; } .pic1 { height: 60vh; width: 50%; } .pic2 { height: 60vh; width: 45%; } .cTextP { padding: 20px; } 

 <div class="GridCont"> <div class="PostContent"> <div class="PicContent pic1"> <div class="cTextP">Picture #1</div> </div> <div class="Content box1"> <div class="cTextP">Content #1</div> </div> <div class="PicContent pic2"> <div class="cTextP">Picture #2</div> </div> </div> </div> 

代碼在這個JS小提琴上

Answer 1

為什么第二個圖像顯示在第一個圖像的正下方？ 沒有任何理由。

第二張圖片在第二行上。

第二行位於第一行的正下方。

更具體地說，第一行由兩個元素占據：圖像＃1和內容框。 第一行的高度由最高的元素定義。 在這種情況下，將顯示內容框。

因此，由於圖像＃1並未擴展行＃1的整個高度，因此圖像之間會存在間隙。

這是該問題的更詳細說明：

• 彈性物品是否可以與上方物品緊密對齊？

（這是與flexbox相關的文章，但邏輯也適用於此。）

可以使用Grid屬性而不是inline-block來使內容框跨越兩行：

 .PostContent { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 60vh 60vh; grid-gap: 1em; grid-template-areas: " pic1 box1 " " pic2 box1 "; } .box1 { grid-area: box1; } .pic1 { grid-area: pic1; } .pic2 { grid-area: pic2; } .PostContent { background: #B8E986; } .PicContent { background: blue; color: white; } .Content { background: #000000; color: white; } .cTextP { padding: 20px;} 

 <div class="GridCont"> <div class="PostContent"> <div class="PicContent pic1"> <div class="cTextP">Picture #1</div> </div> <div class="Content box1"> <div class="cTextP">Content #1</div> </div> <div class="PicContent pic2"> <div class="cTextP">Picture #2</div> </div> </div> </div> 

修改后的jsfiddle

另請注意，網格屬性僅在父元素和子元素之間起作用。

Answer 2

這將解決您的問題：

<div class="grid-container">
  <div class="image1"></div>
  <div class="image2"></div>
  <div class="text"></div>
</div>


.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "image1 image1 text text" "image2 image2 text text";
}

.image1 { grid-area: image1; }

.image2 { grid-area: image2; }

.text { grid-area: text; }

您可以在此處查看工作示例： https : //codepen.io/dennisperremans/pen/NeqNJp