css手册右边空白 |css3 contains

其实，要消除CSS手册右边的空白，有很多种方法，下面大家介绍其中两种较为常用的方式。

/* 方法一：利用CSS3中的calc()函数 */
.reference {
width: calc(100% - 200px); /* 将手册宽度减去200像素的目录栏宽度 */
float: left;
}
/* 方法二：使用flex布局 */
.container {
display: flex;
}
.sidebar {
width: 200px;
}
.reference {
flex: 1; /* 分配剩余空间 */
}

使用方法一时，大家利用了CSS3中的calc()函数，计算出手册的宽度，将其减去目录栏的宽度，以此来消除右侧空白。而方法二则是利用了flex布局，将容器分为两个区域，一部分是固定宽度的目录栏，另一部分则使用flex:1来动态分配剩余空间，实现消除空白的目的。

当然，除了上述两种方法外，还可以使用CSS的伪元素、绝对定位等属性处理右边空白的问题。不同的方法适用于不同的场景，大家需要根据具体情况选择最合适的方式来实现。