Question

我正在尝试使用div使第4行宽。我正在尝试使其向下内联。由于某种原因，该文件的顶行包括底部的两个，而文件的中间两个则随机地位于其下方，因此它不响应格式化。请记住，上一次我执行任何代码都是HTML仍然是所有网站的主要语言。附带说明一下，如果有人可以帮助我理解在用户端进行搜索过滤的必要jQuery。

我已经尝试了几种不同的尝试来使它使用div之前的表工作。

.item3 {
  grid-area: main;
}

.item1 {
  grid-area: main;
}

.grid-container {
  display: grid;
  grid-template-areas: 'menu main main main right right';
  grid-gap: 0px;
  background-color: #2196F3;
  padding: 0px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 255);
  text-align: center;
  padding: 0px 0;
  font-size: 16px;
}

<div class="grid-container">
  <div class="divTableBody">
    <div class="divtablerow">
      <div class="divTableCell">
        <p>NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE</p>
        <p>VIN: 3C4PDCBG1JT508626 STOCK #: 082030</p>
        <p>MSRP$27,385</p>
        <p><a class="buttonGhost" href="#">Request internet advertised price.</a></p>
      </div>
    </div>
  </div>
  <div class="gridcontainer">
    <p>NEW 2018 JEEP RENEGADE ALTITUDE 4X2</p>
    <p>VIN: ZACCJABB4JPH91207 STOCK #: 586043</p>
    <p>MSRP$25,915</p>
    <p><a class="buttonGhost" href="#">Request internet advertised price.</a></p>
  </div>
  <div class="gridcontainer">
    <div class="divTableBody">
      <div class="divTableRow">
        <div class="divTableCell">
          <p>NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE</p>
          <p>VIN: 3C4PDCBG3JT511401 STOCK #: 082035</p>
          <p>MSRP$27,385</p>
          <p><a class="buttonGhost" href="#">Request internet advertised price.</a></p>
        </div>
      </div>
      <div class="gridcontainer">
        <div class="divTableBody">
          <div class="divtablerow">
            <div class="divTableCell">
              <p>NEW 2018 JEEP RENEGADE SPORT 4X4</p>
              <p>VIN: ZACCJBAB4JPJ43841 STOCK #: 586049</p>
              <p>MSRP$26,240</p>
              <p><a class="buttonGhost" href="#">Request internet advertised price.</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="gridcontainer">
      <div class="divTableBody">
        <div class="divTableCell">
          <p>NEW 2018 JEEP RENEGADE SPORT 4X4</p>
          <p>VIN: ZACCJBAB3JPJ42826 STOCK #: 586051</p>
          <p>MSRP$26,240</p>
          <p><a class="buttonGhost" href="#">Request internet advertised price.</a></p>
        </div>
      </div>
    </div>
  </div>
  <div class="gridcontainer">
    <div class="divTableBody">
      <div class="divtablecell">
        <p>NEW 2019 JEEP COMPASS SPORT FWD</p>
        <p>VIN: 3C4NJCAB8KT615373 STOCK #: 492005</p>
        <p>MSRP$25,285</p>
        <p><a class="buttonGhost" href="#">Request internet 
        advertised price.</a></p>
      </div>
    </div>
  </div>
</div>

了解我的代码出了什么问题，并确定为我的所有零件制作4个宽行的最佳方法。

Answer 1

display: grid;应用于网格容器的直接子级。在您的html中，grid-container仅有4个直接子级。这就是为什么您要获得4列。在您的HTML中重新排列它们应该可以解决问题。

要使其具有响应性，您可以尝试使用：

grid-template-columns: repeat( auto-fit, minmax(550px, 1fr));

需要帮助让我的div内联显示

1 个答案: