57 lines
1.4 KiB
CSS
57 lines
1.4 KiB
CSS
/* 左右分栏：左=编辑，右=预览 */
|
|
.editor-pane {
|
|
grid-template-columns: 1fr 1fr; /* 左右各一半 */
|
|
gap: 12px;
|
|
align-items: start;
|
|
}
|
|
/* 兼容你页面现有布局：让编辑区域（左半）占满左侧 */
|
|
.tab-content {
|
|
height: calc(100vh - 220px); /* 视口高度自适应，按需调整 */
|
|
overflow: hidden; /* 内部由 EasyMDE 自己滚动 */
|
|
display: flex;
|
|
}
|
|
.tab {
|
|
height: 100%;
|
|
}
|
|
.tab textarea {
|
|
height: 100%;
|
|
}
|
|
/* 右侧预览 */
|
|
.md-preview-pane {
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
background: #fff;
|
|
height: calc(100vh - 220px);
|
|
overflow: auto;
|
|
}
|
|
.md-preview-pane h1, .md-preview-pane h2, .md-preview-pane h3 {
|
|
border-bottom: 1px solid #f1f5f9;
|
|
padding-bottom: .3em;
|
|
margin-top: 1.2em;
|
|
}
|
|
.md-preview-pane img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
/* 只影响右侧 Markdown 预览里的表格 */
|
|
.md-preview-pane .table {
|
|
/* 如果你想完全摆脱 bootstrap.table 的影响 */
|
|
all: revert; /* 或者 all: unset; 视需求选择 */
|
|
display: table;
|
|
border-collapse: collapse;
|
|
/* 下面写你自己的表格样式 */
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.md-preview-pane .table th,
|
|
.md-preview-pane .table td {
|
|
border: 1px solid #e5e7eb;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.md-preview-pane .table thead th {
|
|
background: #f8fafc;
|
|
font-weight: 600;
|
|
}
|