css左边固定右边自适应
时间: 2023-07-25 08:11:50 浏览: 54
可以使用CSS中的float属性和width属性来实现左边固定,右边自适应的效果。
示例代码如下:
```html
<div class="container">
<div class="left">左边固定</div>
<div class="right">右边自适应</div>
</div>
```
```css
.container {
overflow: hidden; /* 防止浮动元素溢出 */
}
.left {
float: left;
width: 200px; /* 左边固定宽度 */
}
.right {
margin-left: 200px; /* 右边距离左边200px */
}
```
这样,左边的元素就会固定在页面左侧,而右边的元素会自适应填充剩下的宽度。
相关问题
flex左边宽度固定右边自适应怎么写
可以使用 flex 布局中的 flex-grow 属性来实现左边固定宽度,右边自适应的效果。具体做法如下:
HTML 代码:
```html
<div class="container">
<div class="left">左边固定宽度</div>
<div class="right">右边自适应宽度</div>
</div>
```
CSS 代码:
```css
.container {
display: flex;
}
.left {
width: 200px; /* 左边固定宽度 */
background-color: #ccc;
}
.right {
flex-grow: 1; /* 右边自适应宽度 */
background-color: #eee;
}
```
解释一下:
- 使用 display: flex; 将容器设置为 flex 布局。
- 左边元素 .left 设置一个固定宽度 200px。
- 右边元素 .right 设置 flex-grow: 1;,表示可以占用剩余空间,自动适应宽度。
这样就可以实现左边宽度固定,右边自适应的效果了。
css标题在左边独占一列 文字在右边自适应
你可以使用 CSS 的 flex 布局来实现标题在左边独占一列,文字在右边自适应的效果。以下是一个示例代码:
HTML:
```html
<div class="container">
<h2 class="title">标题</h2>
<p class="content">这里是文字内容,可以根据实际情况自适应宽度。</p>
</div>
```
CSS:
```css
.container {
display: flex;
align-items: center;
}
.title {
flex-shrink: 0; /* 不缩小 */
width: 100px; /* 固定宽度 */
}
.content {
flex-grow: 1; /* 自适应 */
}
```
上述代码中,我们使用了 flex 布局,并通过设置 `flex-shrink: 0` 防止标题缩小。标题使用了固定宽度,而文字内容则使用了 `flex-grow: 1` 来自适应宽度。你可以根据实际需求调整宽度值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)