Question

场景：

我有两个彼此相邻的表。

Todo：

我想知道当窗口打开时如何向下移动右表调整大小。该表也应该能够随该表调整大小。

如果有人可以帮助我解决CSS，那就太好了。 Click here for link to codepen

.leftContainer {
    width:50%;
position:fixed;
top:45%;
//display:inline-flex;

table, th, td{
    border: 1px solid black;
    border-collapse: collapse;
}
th {
    padding: 10px 20px 10px 20px;
}
td {
    border:none;
}
thead {
    background-color: #002559;
    color: white
}
tbody {
    background-color: #F2F2F2;
    td {
        padding: 20px 10px 20px 10px;
    }
}
}
.rightContainer {
    max-width: 50vw;
    position:fixed;
    //float:right;
    top:45%;
    right:5%;
display:flex;

table, th, td{
    border: 1px solid black;
    border-collapse: collapse;
}
th {
    padding: 10px 20px 10px 20px;
}
td {
    border:none;
}
thead {
    background-color: #002559;
    color: white
}
tbody {
    background-color: #F2F2F2;
    td {
        padding: 10px;
    }
}
}

Answer 1

问题是两个容器的位置都固定。
因此，如果两个容器都可以在您的情况下获得相对位置，那么使用flex box我们可以实现以下目标。
方法：

为主体（两个div的容器）提供显示柔性
允许使用flex-wrap，以便在没有足够空间的情况下，通过低于第一个div来相应地调整另一个div。

如果没有帮助，请在评论中告诉我。以整页模式
查看

html, body {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-wrap: wrap;
}
.leftContainer {
  border: 1px solid black;
	width:50%;
	position:relative;
}

	table, th, td{
		border: 1px solid black;
		border-collapse: collapse;
	}
	th {
		padding: 10px 20px 10px 20px;
	}
	td {
		border:none;
	}
	thead {
		background-color: #002559;
		color: white
	}
	tbody {
		background-color: #F2F2F2;
		td {
			padding: 20px 10px 20px 10px;
		}
	}
}
.rightContainer {
  border: 1px black solid;
	max-width: 50vw;
	position:leative;
	flex:wrap;
	//float:right;
	top:45%;
	right:5%;
	display:flex;

	table, th, td{
		border: 1px solid black;
		border-collapse: collapse;
	}
	th {
		padding: 10px 20px 10px 20px;
	}
	td {
		border:none;
	}
	thead {
		background-color: #002559;
		color: white
	}
	tbody {
		background-color: #F2F2F2;
		td {
			padding: 10px;
		}
	}
}
.unreadMsgDiv{
	height:18px;
	width:18px !important;
	border-radius:10px;
	background-color:#FFA200;
	display:inline-block !important;
	font-size:13px;
	text-align:center;
	vertical-align: top;
	margin-left: 15px;
	color: black;
	border: 1px solid #FFA200;
}

.beforeRead {
	background-color: #FFA200;
	padding: 0px 5px 0px 5px;
	white-space: nowrap;
}

.afterRead {
	background-color: #BFBFBF;
	padding: 0px 5px 0px 5px;
	white-space: nowrap;
}
.status {
	background-color:white;
	border: 1.2px solid #AEAEAE;
	width:100px !important; 
	height:100px !important;
	text-align: center;
	text-decoration:none;
}
.statusTop {
	margin: 20px 0px 5px 0px;
	font-size: 30px;
	display: block;
}
.statusBottom {
	font-size: 12px;
}
.status:hover {
	background-color:#002559;
	color: white;
	cursor: pointer;
}

							<div class="leftContainer">
								<table>
									<thead>
										<th colspan="4" style="text-align:left">Overview</th>
									</thead>
									<tbody>
										<tr>
											<td><div class="status"><span class="statusTop">10</span><span class="statusBottom" >Total cases</span></div></td>
											<td><div class="status"><span class="statusTop">5</span><span class="statusBottom"><router-link style="text-decoration:none; color:black;" :to="{ name: 'Applications', params: { appType: 'pending', test: 'testinggg' }}">PENDING</router-link></span></div></td>
											<td><div class="status"><span class="statusTop">3</span><span class="statusBottom">SUCCESSFUL</span></div></td>
											<td><div class="status"><span class="statusTop">2</span><span class="statusBottom">REJECTED</span></div></td>
										</tr>
									</tbody>
								</table>
							</div>

							<div class="rightContainer">
								<table>
									<thead>
										<th colspan="3" style="text-align:left">Updates<div class="unreadMsgDiv">unreadMsg</div></th>
									</thead>
									<tbody>
										<tr>
											<td style="font-style:italic; font-size:13px; padding-bottom: 15px;" colspan="3">10 new updates since last login on...</td>
										</tr>
										<tr>
											<td><span>30 Sept</span></td>
											<td style="white-space: nowrap;">Ref. 1234454</td>
											<td>Supervisor has approved the details. Please do check.</td>											
										</tr>
									</tbody>
								</table>
							</div>

Answer 2

.leftContainer, .rightContainer {
    display: flex;
    flex-flow: row wrap;
    flex-basis: auto;
    max-width: 50%;
    align-content: baseline;
    justify-content: flex-start;
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th {
        padding: 10px 20px 10px 20px;
    }
    td {
        border: none;
    }
    thead {
        background-color: #002559;
        color: white
    }
    tbody {
        background-color: #F2F2F2;
    }
}

.leftContainer {
    td {
        padding: 20px 10px 20px 10px;
    }
}

.rightContainer {
    td {
        padding: 10px;
    }
}

调整窗口大小后如何向下移动表格

2 个答案: