Question

我正在使用以下UI。

当缩放比例为100％时，一切正常。但是当用户放大UI时会受到干扰，并显示如下：

div中的卡未调整大小。我希望所有卡都采用标题为E的div的宽度。将卡宽度设置为100％会给其他div带来麻烦。随着div的张数大于div E的张数越来越长。

div E显示一次卡片。水平滚动可能会看到多个卡片。同样，div R一次显示3张牌。它可能包含更多卡。缩放时，可见卡片的某些内容被隐藏在div E中。类似地，div R中的3张卡片中的最后一张也被部分隐藏。

Here是codepen链接，位于代码下方：

#div_A {
  background-color: #B14C08;
  padding: 5px;
  font-weight: 600;
  color: white;
  font-size: 13px;
}

#div_B {
  background-color: #157668;
  padding: 5px;
  font-weight: 600;
  color: white;
  font-size: 13px;
}

#div_C {
  background-color: #E61B00;
  padding: 5px;
  font-weight: 600;
  color: white;
  font-size: 13px;
}

#div_D {
  background-color: #0078D4;
  padding: 5px;
  font-weight: 600;
  color: white;
  font-size: 13px;
}

#div_E {
  background-color: #0D283D;
  padding: 5px;
  font-weight: 600;
  color: white;
  font-size: 13px;
}

.holder {
  min-height: 240px;
  padding: 0 2px 0 2px;
}

.holder .card_holder {
  padding: 0;
  max-width: 290px;
}

.holder .xyz {
  overflow-x: auto;
  min-height: 240px;
}

.shortdetail {
  display: flex;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.content {
  width: 287px;
  position: relative;
  animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}

.card {
  width: 100%;
  height: 80px;
  padding: 0px;
  border: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  background-color: white;
  position: relative;
  overflow: hidden;
}

.shortdetail {
  margin: 5px;
  flex-direction: row;
  z-index: 2;
  position: relative;
}

.profileinfo {
  width: 100%;
  margin: 0px 10px;
  color: #5a5a5a;
  line-height: 1.2;
  font-style: initial;
}

.profileinfo .row {
  margin: 0;
}

.profileinfo .col-8,
.col-4 {
  padding: 0;
}

.profileinfo label {
  margin-bottom: 0px;
}

.name {
  font-size: 13px;
  font-weight: 600;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="col-8">
  <div class="row rounded-top" style="background-color :#405755; color: white; font-weight: 600;">
    <span class="col" style="padding: 5px; padding-left: 8px; font-size: 14px;">List</span>
  </div>
  <div class="row border border-primary" style="padding: 5px 0 5px 0;">
    <div class="row" style="margin: 0px; margin-bottom:3px; width: 100%;">
      <div class="col-3 holder">
        <div class="rounded-top" id="div_A">
          Div A <button>Prev</button> <button>Next</button>
        </div>
        <div class="d-flex flex-row xyz">

          <div class="card_holder">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name">Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="card_holder">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name">Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="col-9 holder">
        <div class="rounded-top" id="div_B">
          Div B
        </div>
        <div class="d-flex flex-row xyz">

          <div class="card_holder" style="margin-right: 20px">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name">Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="card_holder" style="margin-right: 20px">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name">Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="card_holder" style="margin-right: 20px">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name">Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="card_holder">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name">Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-3 holder">
        <div class="rounded-top" id="div_C">
          Div C
        </div>
        <div class="d-flex flex-row xyz">
          <div class="card_holder">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name">Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6 holder">
        <div class="rounded-top" id="div_D">
          Div D
        </div>
        <div class="d-flex flex-row xyz">
          <div class="card_holder" style="margin-right: 20px">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name">Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="card_holder" style="margin-right: 20px">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name">Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="card_holder" style="margin-right: 20px">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name">Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-3 holder">
        <div class="rounded-top" id="div_E">
          Div E
        </div>
        <div class="d-flex flex-row xyz">
          <div class="card_holder">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name">Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

请勿使用px固定宽度或高度，请尝试使用％并查看

如何根据缩放来调整div的大小？

1 个答案: