Question

我想使用Grid和Hero图像为我的博客构建自定义WordPress。

这是我的HTML：

    <div class="site-wrapper">

        <div class="section site-menu">MenuItem 1 | MenuItem 2 | MenuItem 3 | MenuItem 4</div>

  <div class="section site-header">
    <div class="hero">
      <div class="hero-content">
        <h1>If you can dream it, you can do it...</h1>
        <p class="subhead">lets do it !</p>
      </div>
      <div class="bottom-right">This text should be positioned at the bottom right of the Hero Image</div>
    </div>
  </div>            

        <div class="section undefined">
            <div class="undefined-content">
                undefined
            </div>
        </div>

        <div class="section site-footer">Footer</div>

    </div>

这是CSS代码：

* {
    box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;  
}

.site-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

.site-menu {
    background-color:#000;
    color:#fff;
    position: absolute;
    padding: 8px 20px 9px;
    width: 100vw;
}

.hero {
    background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg');
    background-size:cover;
    background-position: center;
    width: 100wh;
    height: 100vh;
    display: flex;
}

.hero-content {
  background-color:#000;
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-directon: column;
  margin: auto;
}

我还为它创建了一个codepen。

我有很多问题：

我的菜单比我的图片宽。
我的中间文字没有在我的英雄图像的中心对齐，h1和<p class="subhead">是并排而不是它们之间。
<div class="bottom-right">不可见！我想把它放在图像的右下角，它应该在它上面。

Answer 1

我在下面添加了一个编解码器以及我的更改。

* {
    box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;  
}

.site-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.site-menu {
    background-color:#000;
    color:#fff;
    position: absolute;
    padding: 8px 20px 9px;
    width: 100%;
    z-index: 1;
}

.hero {
    background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg');
    background-size:cover;
    background-position: center;
    width: 100wh;
    height: 100vh;
    display: flex;
}

.hero-content {
  background-color:#000;
  color:#fff;
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-directon: column;
  margin: auto;
}

.bottom-right {
  position: absolute;
  right: 0;
  margin-top: -1.2em;
  background: black;
  color: white;
}

https://codepen.io/bartholomewdavid/pen/Xedjow

1）当使用100vw的宽度时，它可能会导致问题。原因是因为它占视口的100％，其中包括滚动条。因此添加了1个宽度滚动条。我将其切换为100％

2）将内容集中在flexbox中是因为一些原因而无法正常工作。第一个是有两个东西水平居中，使它偏移外观。

我将.bottom-left组件移出其父级，并将其垂直偏移一点，以显示在背景图像的顶部。

最后一点是出现在副标题旁边的居中文字。为了解决这个问题，我刚刚删除了display：flex on it。

Answer 2

更改您的代码如下：

* {
    box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;  
}

.site-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

.site-menu {
    background-color:#000;
    color:#fff;
    position: absolute;
    padding: 8px 20px 9px;
    width: 100%;
}

.hero {
    background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg');
    background-size:cover;
    background-position: center;
    width: 100wh;
    height: 100vh;
    display: flex;
}

.hero-content {
  background-color:#000;
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  margin: auto;
}

.bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

将div框与CSS Grid对齐的问题

2 个答案: