Question

我正在尝试使用CSS网格创建网站（第一次）。

这是我到目前为止所拥有的：

问题出在红色区域，我希望按钮中的3个元素跨越红色区域的整个高度。这是我当前的CSS：


#red{
    background-color: red;
    padding-right: 5px;
    height: 100%
    grid-area: 1/1/2/2;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 33% auto auto;
}

#upperelement{

    grid-area: 1/1/2/2;
    background-color: blue;
}

#upperelementselect{
    height:100%;
    width: 100%;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    text-align: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #404040;
    color: white;
}

#middleelement{
    padding-top: 5px;
    grid-area: 2/1/4/2;
}

#middleelementselect{
    height:100%;
    width: 100%;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    text-align: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #757575;
    color: white;
}

#lowerelement{
    padding-top: 5px;
    padding-bottom: 5px;
    grid-area: 1/3/2/4;
}

#lowerelementbutton{
    height:100%;
    width:100%;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    text-align: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #404040;
    color: white;
}

以下是我的html：

<div class="red">
<div id="upperelement"><select id="upperelementselect"></select></div>
<div id="middleelement"><select id="middleelementselect"></select></div>
<div id="lowerelement"><button id="lowerelementbutton"></button></div>
</div>

我在做什么错？我知道使用表可能会容易得多，但这不是重点：）

Answer 1

正如我在评论中说的那样，这里有很多错误或不理想的选择，如果没有其他上下文，很难提供适当的解决方案。但是，您可以通过以下方式实现或多或少的要求：

.grid {
  display: grid;
  grid-gap: 5px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
  background-color: red;
  color: white;
}

.controls-column {
  grid-column: 1;
}

.side-content {
  padding: 5px;
  grid-column: 2;
  grid-row: 1/4;
}

.control {
    height: 100%;
    width: 100%;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    text-align: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: white;
}

.select-top {
  background-color: #404040;
}

.select-middle {
  background-color: #757575;
}

.button {
  background-color: #404040;
}

<div class="grid">
  <div class="controls-column">
    <select class="control select-top"></select>
  </div>
  
  <div class="controls-column">
    <select class="control select-middle"></select>
  </div>
  
  <div class="controls-column">
    <button class="control button">button</button>
  </div>
  
  <div class="side-content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quibusdam obcaecati quod distinctio est reprehenderit, sint incidunt culpa unde nobis consequatur ut temporibus, molestiae facilis. Cum veritatis delectus necessitatibus maiores?
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quibusdam obcaecati quod distinctio est reprehenderit, sint incidunt culpa unde nobis consequatur ut temporibus, molestiae facilis. Cum veritatis delectus necessitatibus maiores?
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quibusdam obcaecati quod distinctio est reprehenderit, sint incidunt culpa unde nobis consequatur ut temporibus, molestiae facilis. Cum veritatis delectus necessitatibus maiores?
  </div>
</div>

除此之外，您绝对应该查阅this之类的指南和/或一些教程，因为您所缺少的大部分是对CSS网格布局原理和sintaxe的一些基本理解。希望能帮助您入门。

无法让我的网格项目拉伸父div

1 个答案: