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>

Code is at this JS-fiddle

Answer 1

为什么第二个图像显示在第一个图像的正下方？没有理由。

第二张图片在第二行上。

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

更具体地说，第一行由两个元素占据：图像＃1和内容框。第一行的高度由最高的元素定义。在这种情况下，内容框就是这样。

因此，由于图像＃1并未扩展行＃1的整个高度，因此图像之间会存在间隙。

这是该问题的更详细说明：

Is it possible for flex items to align tightly to the items above them?

（这是与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>

revised jsfiddle

Also note that grid properties work only between parent and child elements.

Answer 2

这将解决您的问题：

https://github.com/UniSharp/laravel-ckeditor

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

CSS网格和内联块设计问题

2 个答案: