Question

我想把3个div放在一张桌子旁边。该表应根据内部内容进行扩展，并且3个div应该同等地占用剩余的空余空间。

我需要将div放在移动视图的表格下面，如此...

Desktop:
[div-1] [div-2] [div-3] [table]

Mobile:
[table]
[div-1]
[div-2]
[div-3]

我一直在玩Flex以使其正常工作，但我无法根据内部内容扩展表格。

我不能使用td {white-space: nowrap;}，因为在移动设备上它会将文本推出屏幕一侧。我需要根据里面的内容扩展表格，但内容不应该强制在屏幕之外。它需要像平常一样环绕在较小的屏幕上。

以下是我的工作示例：http://codepen.io/anon/pen/qadbkK?editors=1100

＆＃13;

/* Do this on tablet size and up */

@media (min-width: 481px) {
  /* Main outer div of helper items AND subtotals */
  .cart-collaterals {
    display: inline-flex;
  }
  /* Outer div of helper items */
  .cart-helper-outer {
    order: -1;
    display: inline-flex;
    justify-content: space-around;
  }
  /* Helper item width */
  .cart-helper-inner {
    max-width: 25%;
  }
  /* Helper item font */
  .cart-helper-inner p {
    text-align: center;
  }
}

＆＃13;

<div class="cart-collaterals">

  <div class="cart_totals">
    <table class="shop_table" cellspacing="0">
      <tbody>
        <tr class="cart-subtotal">
          <th>Subtotal</th>
          <td data-title="Subtotal">$ 348</td>
        </tr>
        <tr class="shipping">
          <th>Shipping</th>
          <td data-title="Shipping">
            The table should expand so that this is one line of text
          </td>
        </tr>
        <tr class="order-total">
          <th>Total</th>
          <td data-title="Total">$ 348</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="cart-helper-outer">
    <div class="cart-helper-inner">
      <p>This is some text. Blah blah blah. Here is some text.</p>
    </div>
    <div class="cart-helper-inner">
      <p>This is some text. Blah blah blah. Here is some text.</p>
    </div>
    <div class="cart-helper-inner">
      <p>This is some text. Blah blah blah. Here is some text.</p>
    </div>
  </div>

</div>

＆＃13;

Answer 1

为td设置/* Do this on tablet size and up */ @media (min-width: 481px) { /* Main outer div of helper items AND subtotals */ .cart-collaterals { display: inline-flex; } /* Outer div of helper items */ .cart-helper-outer { order: -1; display: inline-flex; justify-content: space-around; } /* Helper item width */ .cart-helper-inner { max-width: 25%; } /* Helper item font */ .cart-helper-inner p { text-align: center; } } td{ white-space: nowrap; }，以便将整个文字放在一行中。

<div class="cart-collaterals">

  <div class="cart_totals">
    <table class="shop_table" cellspacing="0">
      <tbody>
        <tr class="cart-subtotal">
          <th>Subtotal</th>
          <td data-title="Subtotal">$ 348</td>
        </tr>
        <tr class="shipping">
          <th>Shipping</th>
          <td data-title="Shipping">
            The table should expand so that this is one line of text
          </td>
        </tr>
        <tr class="order-total">
          <th>Total</th>
          <td data-title="Total">$ 348</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="cart-helper-outer">
    <div class="cart-helper-inner">
      <p>This is some text. Blah blah blah. Here is some text.</p>
    </div>
    <div class="cart-helper-inner">
      <p>This is some text. Blah blah blah. Here is some text.</p>
    </div>
    <div class="cart-helper-inner">
      <p>This is some text. Blah blah blah. Here is some text.</p>
    </div>
  </div>

</div>

project/
    alembic.ini
    alembic/
        versions/
            3cd4a4f9cdef_create_users_table.py
    models/
        __init__.py
        base.py
        users.py

如何根据内容

1 个答案: