Question

我决定将此问题包括在CSS类别中，因为它的工作原理类似于引导网格。

我正在使用其网格管理离子框架。我想制作一个响应系统我希望第一列占用剩余的空间，而第二列则要根据其内容确定确切的大小。为了什么？我希望能够优化小屏幕移动设备上的空间。

例如在小分辨率下：

例如高分辨率：

这是我的代码：

<ion-grid no-padding>
    <ion-row>
      <ion-col col-10 style="border:red 1px solid;">
        <h4 >
          <strong>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum nisi,     eos animi accusamus saepe magnam ducimus ipsa ut non, laborum reiciendis facilis reprehenderit rerum ratione praesentium. Harum, odio. Odit, dolore.

          </strong>
          <span>
          </span>
        </h4>
      </ion-col>
      <ion-col col-auto style="border:red 1px solid;">
        <span>
            <ion-badge>Validado</ion-badge>
            <br>

            <ion-badge>No Validado</ion-badge>
        </span>
      </ion-col>
    </ion-row>
  </ion-grid>

https://stackblitz.com/edit/ionic-wdofnx?file=pages/home/home.html

如何解决？谢谢

Answer 1

尝试一下：-

    .container {
        display: table;
        width: 100%;
    }
    .col {
        display: table-cell;
        padding: 16px;
    }

<div class="container" style="background:red">
      <div class="col">
        <h4 >
          <strong>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum nisi,     eos animi accusamus saepe magnam ducimus ipsa ut non, laborum reiciendis facilis reprehenderit rerum ratione praesentium. Harum, odio. Odit, dolore.
          </strong>
        </h4>
      </div>

      <div class="col" style="background:yellow">
         <h4 >
          <strong>
                        test
          </strong>
        </h4>
      </div>
      </div>

我有2列。我想调整一个内容，另一个占用剩余空间

1 个答案: