[分享]css3左右固定中间自适应

CSS3为我们提供了很多新的特性，其中包括了一个很常用的布局方式——左右固定中间自适应。这种布局方式在实际开发中非常常用，比如电商网站中的商品详情页、新闻资讯页等。.container { width...

CSS3为我们提供了很多新的特性，其中包括了一个很常用的布局方式——左右固定中间自适应。这种布局方式在实际开发中非常常用，比如电商网站中的商品详情页、新闻资讯页等。

.container {
    width: 1000px;
    margin: 0 auto;
    position: relative;
}
.left {
    width: 200px;
    height: 500px;
    background-color: #ddd;
    position: absolute;
    left: 0;
    top: 0;
}
.right {
    width: 200px;
    height: 500px;
    background-color: #ddd;
    position: absolute;
    right: 0;
    top: 0;
}
.middle {
    height: 500px;
    background-color: #eee;
    margin: 0 200px;
} 

以上代码中，我们首先需要先在一个容器中设置宽度，并使用margin: 0 auto将其水平居中。接下来，我们使用position: absolute将左右两个固定宽度的元素分别定位在左右两端。为了让中间元素自适应宽度，我们使用margin: 0 200px来给中间元素留下左右两个固定宽度的位置。

此外，我们还可以为左右元素添加一些过渡效果，让页面看起来更加美观。比如下面的代码可以为左右元素添加缓慢滑动的效果。

.left {
    transition: all 0.5s ease-in-out;
}
.right {
    transition: all 0.5s ease-in-out;
}
.left:hover {
    transform: translateX(-20px);
}
.right:hover {
    transform: translateX(20px);
} 

在这段代码中，我们为左右元素添加了transition属性，并设置其过渡时间为0.5秒，变化方式为缓慢进出。同时，我们还为左右元素的:hover状态添加了translateX属性，让其在鼠标悬停时向左或向右移动20px。

通过上述方法，我们可以轻松实现一个左右固定中间自适应的布局，并且还可以为左右元素添加过渡效果，让页面看起来更加时尚动感。