js首尾固定中间自适应
时间: 2023-05-27 09:03:31 浏览: 46
实现这种布局可以使用 flexbox 或者 grid 布局。
flexbox 布局:
HTML:
```html
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
```
CSS:
```css
.container {
display: flex;
justify-content: space-between;
}
.left, .right {
width: 100px; /*固定宽度*/
}
.main {
flex: 1; /*自适应宽度*/
}
```
grid 布局:
HTML:
```html
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
```
CSS:
```css
.container {
display: grid;
grid-template-columns: 100px auto 100px;
}
.left, .right {
width: 100%; /*占满列*/
}
.main {
grid-column: 2 / 3; /*跨越 2 列*/
}
```
相关问题
js首尾固定中间自适应布局
可以使用CSS的flex布局,将容器设置为flex布局,然后通过设置flex-grow属性使中间的内容自适应宽度,而固定的头部和尾部则可以设置固定宽度。
HTML结构:
```html
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
```
CSS样式:
```css
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 让容器铺满整个屏幕 */
}
.header {
height: 50px;
background-color: #ccc;
flex-shrink: 0; /* 固定高度 */
}
.content {
flex-grow: 1; /* 自适应宽度 */
background-color: #eee;
}
.footer {
height: 50px;
background-color: #ccc;
flex-shrink: 0; /* 固定高度 */
}
```
这样就实现了一个简单的js首尾固定中间自适应布局。
css首尾固定中间自适应
可以使用flex布局来实现CSS首尾固定中间自适应的效果。具体实现步骤如下:
1. 父元素设置display:flex;,使其成为一个flex容器。
2. 子元素设置flex-shrink: 0;,使其在父容器空间不足时不缩小。
3. 将首尾元素的宽度固定,如设置width:100px;。
4. 将中间元素设置flex:1;,使其占据剩余空间自适应。
示例代码如下:
HTML代码:
```html
<div class="container">
<div class="item fixed">首部</div>
<div class="item flex">中间</div>
<div class="item fixed">尾部</div>
</div>
```
CSS代码:
```css
.container {
display: flex;
justify-content: space-between;
}
.item {
height: 50px;
display: flex;
align-items: center;
}
.fixed {
width: 100px;
}
.flex {
flex: 1;
}
```
通过以上代码,即可实现CSS首尾固定中间自适应的效果。