CSS
圖片置中
img {
max-width: 60px;
display: block;
margin: 0 auto;
}
螢幕畫面切割 (畫面是「容器」)
使用CSS的flex屬性，將畫面分割成左右兩邊：
CSS /* 定義主容器為彈性容器，水平排列左右兩個子元素 */
main-container {
display: flex;
flex-direction: row;
}
.left-column {
flex: 1;
display: flex;
flex-direction: column;
}
.right-column {
flex: 1;
padding: 10px;
background-color: #BBBB00;
}
HTML
<div class="main-container">
<div class="left-column">左邊內容</div>
<div class="right-column">右邊內容</div>
</div>
使用CSS的flex屬性，將畫面分割成左右兩邊，然後再將左邊區域分割成上下兩個部分：
CSS
.main-container {
display: flex;
flex-direction: row;
}
/* 左側區域為彈性容器，垂直排列上下兩個子元素 */
.left-column {
flex: 1;
display: flex;
flex-direction: column;
}
/* 右側區域 */
.right-column {
flex: 1;
padding: 10px;
background-color: #BBBB00;
}
/* 左上區域 */
.top-section {
flex: 1;
padding: 10px;
background-color: #FFA500;
}
/* 左下區域 */
.bottom-section {
flex: 1;
padding: 10px;
background-color: #00FF00;
}
HTML
<div class="main-container">
<div class="left-column">
<div class="top-section">左上內容</div>
<div class="bottom-section">左下內容</div>
</div>
<div class="right-column">右側內容</div>
</div>
上方區段為固定標標列，不守下方區段滾動覆蓋。
.right-column {
display: flex;
flex-direction: column;
background-color: #ffbb00;
overflow: hidden;
}
.right-column .upper-section {
flex-shrink: 0;
height: 75px;
background-color: #ffffff; /* 设置一个与下方区段不同的背景色 */
}
.right-column .lower-section {
flex-grow: 1;
overflow-y: auto;
padding: 16px;
}