强制使元素转到FlexBox中的另一行

问题描述 投票：0回答：1

我有一个页面，我必须分成2页。最初，我使用带有2个标签的普通表完成了它。但后来意识到格式化我想做的就是不可能使用表格。所以我决定改用FlexBox。它的工作原理非常好，除了flex-wrap: wrap;标签。如果变焦很大，它只会产生第二行。

Usual zoom

Zoom 1.5x

Well, the way I want to be 'sticked' is like this whatever zoom size is

我知道当声明display: flex时，flexbox会将所有内容都放在一行中。但是我怎么能避免呢？在这种情况下，调整div元素位置的正确方法是什么？例如，当我宣布

.chooseWord 
{
    position: relative;
    padding-left: 300px;
}

我只想要“选择”这个词向左转300px。相反，整个左侧离开......

这是我的代码：

.flex-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.leftSide {
  padding-top: 30px;
  /* flex-basis: 50%; */
  height: auto;
  overflow: auto;
  border: 2px solid #05788D;
}

.rightSide {
 /* flex-basis: 50%; */
  height: auto;
  overflow: auto;
  border: 2px solid #05788D;
  border-left-style: none;
}

.SSRSSObjectCostTableTest {
  border: 3px solid #05788D;
  border-collapse: collapse;
}

.sideForSSRSSTables {
  border: 3px solid #05788D;
}

.partsTable {
  border-collapse: collapse;
}

.sideForPartsTable {
  border: 3px solid #05788D;
}

.chooseSRSS {
  display: flex;
  justify-content: space-between;
}

.chooseWord {
  position: relative;
  padding-left: 300px;
}
<!-- Main thing, that splits it into 2 pages -->

<div class="flex-container">

  <!-- This is our left side -->

  <div class="leftSide">

    <div class="chooseSRSS">
      <span class="chooseWord">Choose</span>
      <table class="SSRSSObjectCostTableTest" width="25%">
        <tr>
          <td class="sideForSSRSSTables">1st option</td>
          <td class="sideForSSRSSTables">2nd option</td>
        </tr>
      </table>
    </div>

    <div class="mainTable">

      <table>
        <!--styleClass="values-table"-->

        <tr>
          <td><b>Here's that table</b></td>
        </tr>

        <tr>
          <td><b><input type="text" size="40" id="estCost_tsnb_title" value="Here's that table" width="25%"></b></td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>


        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <!--styleClass="values-table"-->

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

      </table>

    </div>

  </div>

  <!-- This is our right side -->

  <div class="rightSide">

    <div class="outerTable">

      <span class="partsText">Parts</span>
      <button type="button" class="addButton">+Add button</button>

      <!--<table class="outerPartTable">-->

      <div class="partsClass">

        <table class="partsTable">
          <td class="sideForPartsTable" width="5%">Expand button</td>
          <td class="sideForPartsTable">Title + sum1 + sum2</td>
          <td class="sideForPartsTable" width="5%">edit</td>
          <td class="sideForPartsTable" width="5%">remove</td>
        </table>

      </div>

    </div>

  </div>

  <!--</table>-->
</div>
html css flexbox
1个回答
0
投票

请看一下这个，如果还有其他需要，请告诉我。

.flex-container {
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
}

.leftSide {
  padding-top: 30px;
  border: 2px solid #05788D;
  width: 50%;
}

.rightSide {
  border: 2px solid #05788D;
  border-left-style: none;
  width: 50%;
}

.partsTable, .leftSize table {
  border-collapse: collapse;
}

.sideForPartsTable {
  border: 3px solid #05788D;
}
<!-- Main thing, that splits it into 2 pages -->

<div class="flex-container">

  <!-- This is our left side -->
  <div class="leftSide">
    <table>
      <thead>
        <tr>
          <td>Some text</td>
          <td>Some value</td>
          <td>Currency</td>
          <td>1st option</td>
          <td>2nd option</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><b>Here's that table</b></td>
        </tr>
        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>

        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>
        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>
        <tr>
          <td><b>Here's that table</b></td>
          <td>300</td>
          <td>$</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- This is our right side -->
  <div class="rightSide">



    <!--<table class="outerPartTable">-->

    <div class="partsClass">

      <table class="partsTable">
        <thead>
          <tr>
            <td> <span class="partsText">Parts</span></td>
            <td>
              <button type="button" class="addButton">+Add button</button></td>
          </tr>
          <tr>
            <td class="sideForPartsTable">Expand button</td>
            <td class="sideForPartsTable">Title + sum1 + sum2</td>
            <td class="sideForPartsTable">edit</td>
            <td class="sideForPartsTable">remove</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              Some value
            </td>
            <td>
              Some value
            </td>
            <td>
              Some value
            </td>
            <td>
              Some value
            </td>
          </tr>
        </tbody>
      </table>

    </div>

  </div>

</div>

<!--</table>-->
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.