将网格项与网格模板列对齐

Question

我正在开发一个网页，我试图添加一些CSS网格，但它有点困难。

我只想把桌子放在左边（85％）和右边的按钮（15％）。

＆＃13;

＆＃13;

#div-radio {
  font-size: 18pt;
  display: flex;
  margin-top: 1.2%;
  margin-left: 2%;
  width: 46%;
  display: grid;
  grid-template-columns: 86% auto;
}

table {
  font-size: 15pt;
  margin-left: 2%;
  margin-right: 2%;
  border-top: 10px;
  text-align: center;
  width: 160%;
}

#arrows {
  display: flex;
  float: right;
}

＆＃13;

<div id="div-radio" class="radio-item">
  <table class="table">
    <thead>
      <tr id="tr-principal">
        <th>ORDEN</th>
        <th>SECUENCIA</th>
        <th>ARTÍCULO</th>
        <th>DES. ARTÍCULO</th>
        <th>CANTIDAD</th>
        <th>CAN. FABRICADA OF</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="orden"> </td>
        <td class="secuencia"></td>
        <td class="articulo"></td>
        <td class="des_articulo"></td>
        <td class="cantidad"></td>
        <td class="can_fabricada_of"></td>
      </tr>
    </tbody>
  </table>

  <div id="arrows" align="right">
    <button>
        <img src="images/arrow_left.png" />
    </button>
    <button>
        <img src="images/arrow_right.png" />
    </button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

谢谢你的建议。

Answer 1

你有很多问题。

• 您的容器上有2个显示属性
• 您错过了css中的ID选择器（＃）
• 你在花车中混合
• 您正在混合不属于
的宽度

＆＃13;

＆＃13;

#div-radio {
  /* ^^ WAS MISSING ID SELECTOR '#' */
  font-size: 18pt;
  /* display: flex; // DELETE THIS */
  /* width: 46%; // DELETE THIS */
  display: grid;
  background: #dddddd;
  grid-template-columns: 85% auto;
  font-size: 8pt;

  border-top: 10px;
  text-align: center;
  /* width: 160%; // DELETE THIS */
}

table {
  font-size: 10pt;
  margin-left: 2%;
  margin-right: 2%;
  border-top: 10px;
  text-align: center;
  width: 160%;
}

#arrows {
  /* ^^ WAS MISSING ID SELECTOR '#' */
  background: #cccccc;
  /* display: flex;; DELETE THIS */
  /* float: right; DELETE THIS */
}

＆＃13;

<div id="div-radio" class="radio-item">
    <table class="table">
        <thead>
            <tr id="tr-principal">
                <th>ORDEN</th>
                <th>SECUENCIA</th>
                <th>ARTÍCULO</th>
                <th>DES. ARTÍCULO</th>
                <th>CANTIDAD</th>
                <th>CAN. FABRICADA OF</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="orden"> </td>
                <td class="secuencia"></td>
                <td class="articulo"></td>
                <td class="des_articulo"></td>
                <td class="cantidad"></td>
                <td class="can_fabricada_of"></td>
            </tr>
        </tbody>
    </table>
    <div id="arrows" align="right">
        <button>
            <img src="images/arrow_left.png" />
        </button>
        <button>
            <img src="images/arrow_right.png" />
        </button>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

<Logger name="com.x.log4j2xml" level="debug" additivity="false">
<AppenderRef ref="File-Appender" level="error"/>
</Logger>

＆＃13;

#div-radio {
  font-size: 18pt;
  /* display: flex;               <-- remove */
  margin-top: 1.2%;
  margin-left: 2%;
  /* width: 46%;                  <-- remove */
  display: grid;
  grid-template-columns: 85% 1fr; /* adjusted */
}

table {
  font-size: 15pt;
  margin-left: 2%;
  margin-right: 2%;
  border-top: 10px;
  text-align: center;
  /* width: 160%;                  <-- remove */
}

#arrows { }

＆＃13;

＆＃13;

＆＃13;

此外，在网格（和Flex）布局中使用百分比边距时请记住这一点：

• Percentage padding / margin on grid item ignored in Firefox

Answer 3

尝试此操作，如果需要，请在媒体查询中为列提供名称以便进行播放。

<强> CSS

#div-radio {
  font-size: 18pt;
  margin-top: 1.2%;
  margin-left: 2%;
  display: grid;
  grid-template-columns: 86% 1fr;
  grid-template-areas: "left-col right-col";
}

.left-col {
  grid-area: left-col;
}

.right-col {
  grid-area: right-col;
}

table {
  font-size: 15pt;
  margin-left: 2%;
  margin-right: 2%;
  border-top: 10px;
  text-align: center;
}

#arrows {
  display: block
}

<强> HTML

<div id="div-radio" class="radio-item">
  <div class="left-col">


    <table class="table">
      <thead>
        <tr id="tr-principal">
          <th>ORDEN</th>
          <th>SECUENCIA</th>
          <th>ARTÍCULO</th>
          <th>DES. ARTÍCULO</th>
          <th>CANTIDAD</th>
          <th>CAN. FABRICADA OF</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="orden"> </td>
          <td class="secuencia"></td>
          <td class="articulo"></td>
          <td class="des_articulo"></td>
          <td class="cantidad"></td>
          <td class="can_fabricada_of"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="right-col">

    <div id="arrows" align="right">
      <button>
        <img src="images/arrow_left.png" />
      </button>
      <button>
        <img src="images/arrow_right.png" />
      </button>
    </div>
  </div>
</div>

<强> DEMO HERE