我有一个页面，我必须分成2页。最初，我使用带有2个标签的普通表完成了它。但后来意识到格式化我想做的就是不可能使用表格。所以我决定改用FlexBox。它除了flex-wrap: wrap;标记外，效果很好。如果缩放非常大，它只会产生第二行。
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>
答案 0 :(得分：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>