css能不能实现左边div固定宽度,右边div自适应撑满剩下的宽度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css能不能实现左边div固定宽度,右边div自适应撑满剩下的宽度相关的知识,希望对你有一定的参考价值。

2列布局,左侧定宽,右侧宽度为100%,就能自适应。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>两列布局</title>
    <style>
       .container 
           width: 80%;
           height: 600px;
           border: 10px solid lightslategray;
           margin: 0 auto;
       
       .left,.right 
           /* 将块级元素呈现水平方向的排列效果 */
           float: left;
       
       .left 
           /* 定宽 - 宽度值确定不变的 */
           width: 25%;
           height: 600px;
           background-color: lightcoral;
       
       .right 
           width: 75%;
           height: 600px;
           background-color: lightseagreen;
       
   </style>
</head>
<body>
<!-- 容器 -->
<div class="container">
   <!-- 两列 - 定宽 -->
   <div class="left"></div>
   <div class="right"></div>
</div>
</body>
</html>

贴一种给你,我这边有6种实现方法。

参考技术A 右边DIV宽度设为自动就可以了

以上是关于css能不能实现左边div固定宽度,右边div自适应撑满剩下的宽度的主要内容,如果未能解决你的问题,请参考以下文章

css能不能实现左边div固定宽度,右边div自适应撑满剩下的宽度

css能不能实现左边div固定宽度,右边div自适应撑满剩下的宽度

css 两列布局 右边固定 左边可伸缩 但是有最小宽度 如何实现?

两个div并排,左边div固定宽度,右边宽度自适应”,至少列出4种。

左边的DIV设定了固定的宽度,右边的DIV如何自适应地填满剩下的屏幕宽度?

如何通过 CSS 实现一个左边固定宽度 右边自适应的两列布局