Question

我正在尝试创建一个包含要订购的项目/比萨浇头的网格，我希望在网格中每个项目下方都具有一个“添加到购物车”按钮。我将如何去做？

到目前为止，我已经尝试过简单地将带有换行符的按钮放在一个元素下，但是按照假设，这没有用。

这是我体内的相关代码：

.wrapper {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-row-gap: 30px;
  grid-column-gap: 10px;
}

.item {
  background: firebrick;
  color: white;
  padding: 10px;
}

.item:nth-child(even) {
  background: rgb(139, 19, 19);
}

.add {
  margin-bottom: 100px;
}

button {
  margin-bottom: 100px;
}

#container {
  background-color: maroon;
  width: 1500px;
  height: 1200px;
  margin-left: auto;
  margin-right: auto;
  border-color: black;
  border-width: 10px;
  border-style: double;
}

<div id="container">
  <div id="header">
    <h1> Pizza Planet </h1>
    <script src="index.js"></script>
  </div>
  <div id="content">
    <h2>Select your items:</h2>
    <div class="wrapper">
      <div class="item">1</div>
      <div class="add"><button>Add To Cart</button></div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </div>
</div>

所有要做的事情是在网格上的另一个单元格上增加了一个很小的“添加到购物车”按钮，从而产生了巨大的差距。任何帮助将不胜感激，谢谢。

Answer 1

一种方法可能是使用CSS grid来达到您的要求。您可以按照上述说明进行简单的网格布局：

.item img {
  width:100%;
  /* Causes the button to sit below the img */
  display:block;
}

.item button {
  width:100%;
}

.grid {
  /* Specifies css grid to be used */
  display:grid; 
  /* Specifies the number of columns and sizes in the grid */
  grid-template-columns: 1fr 1fr;
  /* Specifies spacing between grid cells */
  grid-gap:1rem;
}

<div class="grid">
  <div class="item">
    <img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
    <button>Order</button>
  </div>
  <div class="item">
    <img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
    <button>Order</button>
  </div>
  <div class="item">
    <img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
    <button>Order</button>
  </div>
  <div class="item">
    <img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
    <button>Order</button>
  </div>
</div>

是否可以在网格中的每个元素下方放置按钮？

1 个答案: