Question

我正在尝试使标题中的右侧图像停靠在右侧。也许我可以使用float，但是我正在尝试使用CSS Grid来做到这一点。另外，也许有更好的实现。

最终，我确实想为此添加菜单/导航，正文和页脚。是否有任何出色的基于CSS Grid的模板覆盖响应式，移动优先的设计？有效的jsfiddle：https://jsfiddle.net/cox/4cqpws2o/275/

包括引导程序的最新修订版，并对“ section”元素进行重新处理以将div与class =“ section”一起使用（添加引导程序后需要）：https://jsfiddle.net/cox/4cqpws2o/578/

article {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: 130px;
      grid-gap: 0px;
    }

section:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
section:nth-child(2) { grid-column: 2 / 5; grid-row: 1; z-index: 1; }
section:nth-child(3) { grid-column: 3 / 7; grid-row: 1; }

/*@media ( max-width: 500px ) {
   article { grid-template-columns: 100px; justify-content: center; }
   section:nth-child(1) { grid-row: 1 / 4; grid-column: 1; }
   section:nth-child(2) { grid-row: 3 / 5; grid-column: 1; }
   section:nth-child(3) { grid-row: 5 / 7; grid-column: 1; }
}*/

/* non-essential demo styles */
section:nth-child(1) {
  background-color: transparent;
  /*border: 2px solid red;*/
  justify-content: left;
}
section:nth-child(2) {
  background-color: transparent;
  /*border: 1px solid blue;*/
  justify-content: left;
}
section:nth-child(3) {
  background-color: transparent;
  border: 1px solid orange;
  justify-content: right;
  min-height: 130px;
  width: 485px;
}
section {
  display: flex;
  justify-content: center; /* default */
  align-items: center;
  font-size: 1.2em;
}
.header-title {
  background-image: url('https://res.cloudinary.com/adamcox/image/upload/v1557459731/header-test/TEST-SIGNx2.png');
  /*transform: scale(.5) translate(-50%, -50%);*/
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: bottom;
  background-position-y: top;
  min-height: 28px;
  min-width: 330px;
}
.header-left {
  background-image: url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/LEFTx2.jpg');
  background-size: cover;
  background-position-x: bottom;
  background-position-y: left;
  min-height: 130px;
  min-width: 166px;
}
.header {  
  background-image: url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/BGPATTERNx2.jpg');
  z-index: -1;
  min-height: 130px;
  /*display: flex;*/
}
.header-right {
  background-image: url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/RIGHTx2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 130px;
  min-width: 485px;
  background-position: right top;
}

<article class="header">
  <section><span class="header-left">1</span></section>
  <section><span class="header-title"></span></section>
  <section><span class="header-right"></span></section>
</article>

Answer 1

您正在使用grid-column定义重叠您的网格项，然后使用justify-content: start覆盖了网格中列的默认 stretch 单元格，然后为section元素使用固定宽度。

相反，我建议使用三列网格，在左右两列中使用图片，在中间使用文字：

article {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 130px;
  background: url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/BGPATTERNx2.jpg');
}

section:nth-child(1) {
  background: url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/LEFTx2.jpg') no-repeat;
  background-size: cover;
}

section:nth-child(2) {
  background: url('https://res.cloudinary.com/adamcox/image/upload/v1557459731/header-test/TEST-SIGNx2.png') no-repeat;
  background-size: contain;
  background-position: center;
}

section:nth-child(3) {
  background: url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/RIGHTx2.jpg') no-repeat;
  background-size: cover;
}

<article class="header">
  <section></section>
  <section></section>
  <section></section>
</article>

甚至网格布局也可能是 overkill -您可以使用背景将整个标头包含在一个元素中（下面的演示通过调整background-position属性来实现移动优先）：

article {
  height: 130px;
  background: url('https://res.cloudinary.com/adamcox/image/upload/v1557459731/header-test/TEST-SIGNx2.png') no-repeat,
              url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/LEFTx2.jpg') no-repeat, 
              url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/RIGHTx2.jpg') no-repeat, 
              url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/BGPATTERNx2.jpg');
  background-size: 33.33% auto, contain, contain, cover;
  background-position: center, left center, 250px, center;
}

/* for desktop */
@media only screen and (min-width: 900px) {
  article {
    background-position: center, left center, right, center;
  }
}

<article></article>

如何使用CSS网格将图片停靠在标题中？

1 个答案: