HTML布局之左右布局
作为一名合格的前端程序员,各种布局方式是肯定要熟练的,可我就是这么一个不合格的前端,这里记录一下左右布局的实现思路父元素容器设置固定高度,设置flex,宽度可以设为100%或者具体像素,根据业务需求来定父元素下有两个子元素,分别为左右容器左容器或右容器均可以设置固定宽度(如果仅是左右布局,可设置一个宽,另一方flex设为1),高度为100%父级高度,纵向溢出自动补充说明:当然了,你想自己自定义滚动
·
作为一名合格的前端程序员,各种布局方式是肯定要熟练的,可我就是这么一个不合格的前端,这里记录一下左右布局的实现思路
- 父元素容器设置固定高度,设置flex ,宽度可以设为100%或者具体像素,根据业务需求来定
- 父元素下有两个子元素,分别为左右容器
- 左容器或右容器均可以设置固定宽度(如果仅是左右布局,可设置一个宽,另一方flex设为1),高度为100%父级高度,纵向溢出自动
- 补充说明:当然了,你想自己自定义滚动条的样式也是可以的
具体代码如下:
<div class="layout">
<aside class="aside">
<p>1++</p>
<p>1++</p>
<p>1++</p>
<p>1++</p>
<p>1++</p>
<p>1++</p>
<p>1++</p>
<p>1++</p>
<p>1++</p>
<p>1++</p>
<p>1++</p>
<p>1++</p>
</aside>
<article class="article">
<p>2++</p>
<p>2++</p>
<p>2++</p>
<p>2++</p>
<p>2++</p>
<p>2++</p>
<p>2++</p>
<p>2++</p>
<p>2++</p>
<p>2++</p>
<p>2++</p>
<p>2++</p>
</article>
</div>
.layout{
width: 100%;
height: 100vh;
display: flex;
}
.aside{width: 300px;height: 100%;overflow-y: auto;}
.article{flex: 1;height: 100%;overflow-y: auto;background-color: #09f;}
更多推荐
已为社区贡献1条内容
所有评论(0)