Question

我在div中有两个div，如下所示：

.w-35 {
  width: 35%;
}

.d-flex {
  display: flex!important;
}

.mr-auto {
  margin-right: auto!important;
}

.flex-column {
  -webkit-box-orient: vertical!important;
  -webkit-box-direction: normal!important;
  -ms-flex-direction: column!important;
  flex-direction: column!important;
}

<div class="d-flex">
  <div class="mr-auto">
    <div>Box1</div>
  </div>

  <div class="w-35">
    <div class="flex-column"> Box2 </div>
  </div>
</div>

第二个div的宽度为35%时，有没有办法我可以正确推断类div的第一个mr-auto的宽度为65％？我一直希望第一个div的宽度为100% - width_of_second_div_in_percent。

我该怎么办？

Answer 1

如果仅在flex: 1元素上设置.mr-auto，则它将占用该行中剩余的可用宽度，并且不需要设置fixed。另外，您可以在宽度固定的元素上使用width属性来代替flex。

采用这种方法，.mr-auto元素的宽度将始终取决于固定元素的宽度。

.w-35 {
  flex: 0 0 35%;
}

.mr-auto {
  flex: 1;
}

.d-flex {
  display: flex;
}

.d-flex > div {
  border: 1px solid black;
}

<div class="d-flex">
  <div class="mr-auto">
    <div>....</div>
  </div>

  <div class="w-35">
    <div class="flex-column"> ... </div>
  </div>
</div>

从另一个div的宽度中得出div的宽度-我该怎么做？

1 个答案: