废鸡程序员 2022-01-13 17:47 采纳率: 86%
浏览 47
已结题

在一个Div容器里有两个子Div，如何让第一个子Div宽度自适应内容，第二个子Div宽度用完剩下的空间。 这个怎么做?

在一个Div容器里有两个子Div，如何让第一个子Div宽度自适应内容，第二个子Div宽度用完剩下的空间。 这个怎么做?

  • 写回答

3条回答 默认 最新

  • 前端阿彬 新星创作者: 前端开发技术领域 2022-01-13 18:32
    关注

     

    父div{

      display:flex

    }

    第一个div{

      width: fit-content

    }

    第二个div{

      flex:1

    }

     

    如有帮助，麻烦点个  采纳此答案  谢谢

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • CSS 实现div宽度根据内容自适应
    2020-09-24 23:02
    在Web开发中，经常会有需求让元素的宽度根据其内容自动调整，这样可以确保布局的灵活性和可读性。本文将详细介绍如何使用CSS来实现div宽度根据内容自适应。 首先，我们需要理解默认情况下，div元素作为块级元素，它...
  • 子元素div高度不确定时父div高度如何自适应
    2021-01-19 20:51
    Div即父容器不根据内容自适应高度，我们看下面的代码： 复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好...
  • div+css实现自适应宽度按钮
    2020-10-30 15:09
    描述“div+css实现自适应宽度按钮”进一步强调了本篇文章的主要内容，即使用div和css来实现自适应宽度按钮。 标签解释 标签“自适应宽度按钮 div+css”表明了这篇文章的主题和相关技术栈，即使用div和css来实现...
  • div或img图片高度随宽度自适应的方法
    2020-12-28 19:02
    利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来实现自适应。 二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 （这种方法是可以在图片...
  • vue3 ResizeObserver如何监听一个容器盒子div宽度高度发生改变
    2024-08-06 17:57
    红烧咸咸鱼的博客 vue3 ResizeObserver如何监听一个容器盒子div宽度高度发生改变
  • html div的宽度自适应,div宽度自适应一种简单的解决方案
    2021-06-15 00:34
    拽气崽崽的博客 大尺寸的显示屏盛行的现在，网页UI设计师经常会根据项目，来设计全屏网站，这样就面临一个网页宽度自适应的问题，在这里笔者给大家分享一个基于css的全屏网站解决方案。上图是笔者写此文时候正在做的一个网站项目，...
  • 独行DIV自适应宽度布局CSS实例与应用范围
    2020-12-13 14:16
    独行DIV自适应宽度布局是CSS布局中一种重要的技术，主要应用于创建响应式网页设计，以确保内容在不同屏幕尺寸下都能良好展示。在这样的布局中，DIV元素的宽度不是固定不变的，而是根据其所在容器的大小动态调整。这...
  • div盒子最小宽度_Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法
    2021-01-14 01:52
    我努力变强的博客 Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法网上方法很多，个人认为以下两种思想是最为常用的。一种是让第一个盒子脱离文档流，第二个盒子离左边有一定距离。第二种方法是使用flex布局，不过有一些兼容...
  • 相邻div实现一个跟着另一个自适应高度示例代码
    2020-09-25 07:18
    在网页布局设计中，相邻`div`元素的自适应高度是一项常见的需求，特别是在创建响应式设计或内容填充的布局时。本示例代码提供了一种方法，使得左右两个相邻的`div`元素能够根据各自的内容自动调整高度，保持水平对齐...
  • 父div高度不能自适应子div高度的解决方案
    2020-10-25 21:52
    第二种解决方案是使用一个高度为1px的div或br标签来实现高度的撑开，其CSS样式如下： ```html <div style="height:1px; margin-top:-1px; clear:both; overflow:hidden;"/> ``` 或者 ```html ;"/> ``` 在这个...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 1月22日
  • 已采纳回答 1月14日
  • 创建了问题 1月13日