|
|

楼主 |
发表于 2021-12-2 21:01
|
显示全部楼层
本帖最后由 加林森 于 2022-1-7 14:20 编辑
你辛苦的啊,开心就好!
<style type="text/css">
.大容器 {
margin: 0 auto;
width: 720px; /* 论坛测试用的宽度 */
border:1px solid red; /* 测试用 */
display: flex;
flex-direction: column;
}
.大容器 > div { margin: 4px; padding: 4px; border: 1px solid green; } /* 测试用 */
.顶部 {
display: flex;
flex-direction: row;
}
.顶部 > div { margin: 4px; padding: 4px; border: 1px solid yellow; } /* 测试用 */
.顶左 { width: 200px; height: 100px; }
.顶中 { }
.顶右 { width: 120px; }
.中部 {
display: flex;
flex-direction: row;
}
.中部 > div { margin: 4px; padding: 4px; border: 1px solid gray; } /* 测试用 */
.中左 { height: 260px; } /* 测试用 */
.中右 { width: 200px; }
.变长 { flex-grow: 2; }
</style>
<div class="大容器">
<div class="顶部">
<div class="顶左">Logo图片</div>
<div class="顶中 变长">宣传图片</div>
<div class="顶右">后台邮箱等</div>
</div>
<div class="中部">
<div class="中左 变长">中部:正文部分</div>
<div class="中右">中部:右侧边栏</div>
</div>
<div>底部:细节省略</div>
</div>
|
|