主页 / 问题 / 746068
Accepted
Tima
Asked:2020-11-17 22:33:43 +0000 UTC2020-11-17 22:33:43 +0000 UTC

如何将一个块分成 30px 和其余部分？

  • 772

有一个块。你需要除以二。一个是 30px，另一个是自动的。

<div>
  <div class="left">

  </div>
  <div class="right">

  </div>
</div>

我解决了这样的问题：

<table style="height: 100%; width: 100%; border-collapse: collapse; table-layout: fixed;">
<tr>
    <td style="width: auto; background-color: #abc">hвавфыавправi</td>
    <td style="width: 30px; background-color: #def">hii</td>
</tr>
</table>

有趣的是没有桌子。

html

3 个回答

  1. Best Answer

    浮动块解决方案。第一个块 - 30 像素。第二个占据所有剩余空间，因为它div (display: block;)

    <div>
     <div style="float:left; width:30px; background-color:pink">h</div>
     <div style="background-color:olive">text</div>
</div>

    • 3

  2. 柔性：

    .right {
  width: 30px;
  flex-basis: 30px;
  flex-shrink: 0;
  background: red;
}

.left {
  flex-basis: 100%;
  flex-shrink: 1;
  background: #ccc;
}

.wrap {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
    <div class="wrap">
  <div class="left">
      Left
  </div>
  <div class="right">
  </div>
</div>

    • 3 

  3. <table style="height: 100%; width: 100%; border-collapse: collapse; table-layout: fixed;">
<tr>
    <td style="width: calc(100% - 30px); background-color: #abc">hвавфыавправi</td>
    <td style="width: 30px; background-color: #def">hii</td>
</tr>
</table>

    • 2

相关问题