时间戳

首页 > 解决方案 > 图像从网格和尺寸问题中消失

css - 图像从网格和尺寸问题中消失

问题描述

我对编码很陌生，我正在尝试使用网格。但我有点卡住了。我有以下 codePan 项目：

* {
  box-sizing:border-box
}
body {
  height:100vh;
  width: 100%;
  background-color: red;
  padding:0;
  margin:0;
}
#wrapper {
  background-color:blue;
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  display: grid;
  grid-template-areas:
    "nav"
    "content"
    "footer" ;
  grid-template-columns: 1fr;
  grid-template-rows: .8fr 1fr .8fr ;
}
#nav {
  background-color: yellow;
  grid-area: "nav";
    position: sticky; 
    top: 0;
}
#content {
  background-color: pink;
  grid-area: "nav";
  display:flex;
  flex-direction: column;
}
footer {
  background-color: brown;
  grid-area: "nav";
}
#box1 {
  background-color:purple;
  height:50%;
}
#box2 {
  background-color: blue;
  height:60%;
  display:flex;
  flex-direction: column;
}
.image {
  height: auto;
  width: 400px;
  position: relative;
  top:-150px; 
}
button {
    height: 90px;
    width: 400px;
    background-color: #262A58;
    color: white;
    font-size: 1.5em;
    font-family: 'EightOne';
    border-radius: 10px;
    border-style: none;
    cursor: pointer;
      
}
<div id="wrapper">
   <div id="nav"> nav </div>
   <div id="content">
     <div id="box1"> 
        <h1>flower</h1>
     </div>
     <div id="box2">
       <img class="image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.goldpetal.net%2Fmedia%2Fimages%2Fproduct_gallery%2FGerbera_Flower_12.jpg&f=1&nofb=1" alt="">
       <button> buy flower </button>
     </div>
   </div>
  <footer>
    footer
  </footer>

</div>

我想要的是与这张照片类似的东西： 图片

不幸的是，我无法定位 Box2 中的内容，因为按钮完全从网格中熄灭。我尝试了几个选项，但最后它总是与 Box2 中的内容有些问题。

如果有人可以给我一个建议。可能我使用错误的方式网格...

谢谢！

标签： cssflexboxgrid

解决方案

让您的网格定义区域的大小，并使用 Flexbox 来布置您的内容。

您完全可以使用 CSS Grid 实现这种布局。该按钮溢出了它的内容区域，因为网格区域#box2的高度是固定的60%，但是你的和你的都比那个高。基本上，您的图像按下按钮。content.imagebutton

你不需要在你的内容上设置明确的高度，因为网格已经处理好了。

白蓝色背景有点棘手，因为它与图像的边缘不完全对齐。但是您可以通过内容容器上的背景渐变来实现这种效果。

看看这个可行的解决方案作为灵感：

body {
  height: 100vh;
  padding: 0;
  margin: 0;
}
#wrapper {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas:
    'nav'
    'content'
    'footer';
  grid-template-columns: 1fr;
  grid-template-rows: 64px 1fr 96px;
}
#nav {
  grid-area: nav;
  position: sticky;
  top: 0;
  background-color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
#content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(to bottom, transparent 60%, #aad 60%);
  align-items: center;
  padding: 32px;
}

#content .wrapper {
  display: flex;
  flex-direction: column;
  width: 400px;
}
footer {
  grid-area: footer;
}
.image {
  border: solid 16px #aad;
  margin: 16px;
}
button {
  padding: 8px 16px;
  background-color: #262a58;
  color: white;
  font-size: 1.5em;
  font-family: 'EightOne';
  border-radius: 10px;
  border-style: none;
  cursor: pointer;
  margin-top: 32px;
  align-self: center;
}
<div id="wrapper">
  <div id="nav">nav</div>
  <div id="content">
    <div class="wrapper">
      <h1>flower</h1>
      <img
        class="image"
        src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.goldpetal.net%2Fmedia%2Fimages%2Fproduct_gallery%2FGerbera_Flower_12.jpg&f=1&nofb=1"
        alt="Flower"
      />
      <button>buy flower</button>
    </div>
  </div>
  <footer>footer</footer>
</div>

推荐阅读