讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > html教程 > 正文

如何让父元素自适应子元素的大小？_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:18:01
原创
1705人浏览过

有个图片  images/book1.jpg  维度是124124*175



    如何让父元素自适应子元素的大小？_html/css_WEB-ITnose


效果如下，此时


下面增加img的padding:20px



    如何让父元素自适应子元素的大小？_html/css_WEB-ITnose


此时效果如图

如何写，可以使得div的大小可以自动变成：


测试过了，div不可以写成
div{
    overflow:auto;
    zoom:1;
    border:1px solid red;
}
宽度会撑满整个body.

魔术橡皮擦
魔术橡皮擦

智能擦除、填补背景内容

魔术橡皮擦 105
查看详情 魔术橡皮擦


回复讨论(解决方案)

div{display:inline-block;
    border:1px solid red;padding:20px;
}

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：移动web开发之屏幕三要素_html/css_WEB-ITnose 下一篇：[CSS]Flexbox and Truncated Text（译）_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
html如何左对齐图片_HTML实现图片左对齐布局【左对齐】 图片左对齐可通过五种方法实现：一、父容器设text-align:left；二、图片设display:block且margin:0；三、图片设float:left；四、父容器用flex布局并justify-content:flex-start；五、父容器用grid布局并justify-content:start。
2025-12-22 18:09:08
292
html如何编写_编写规范HTML代码的要点【要点】 编写结构清晰、语义准确且易于维护的HTML需遵循七项规范：一、正确声明DOCTYPE；二、完整设置html根元素与lang属性；三、合理组织head与body结构；四、优先使用语义化标签；五、严格闭合可闭合标签；六、为媒体元素提供必需属性；七、统一使用双引号包裹属性值。
2025-12-22 18:03:28
885
html5如何查找代码_HTML5代码查找与调试工具技巧【代码查找】 HTML5代码查找有五种实用方法：一、浏览器开发者工具元素搜索；二、控制台用querySelector查找；三、源代码视图全文本搜索；四、编辑器正则匹配语义标签；五、W3C验证服务定位规范错误。
2025-12-22 17:58:21
665
美篇如何转换成html_将美篇内容转换为HTML格式文件【文件】 可借助三种方法将美篇图文保存为本地HTML文件：一、用浏览器开发者工具手动提取并整理DOM结构；二、使用SingleFile等第三方工具自动抓取生成；三、通过Python脚本自动化解析与清洗网页内容。
2025-12-22 17:56:46
554
HTML如何转换为PDF格式_打印与导出方案解析【技巧】 HTML转PDF有四种主流方案：一、浏览器内置打印功能，操作简单且样式保留好；二、wkhtmltopdf命令行工具，适合批量与服务端自动化；三、jsPDF+html2canvas前端生成，适用于交互式单页应用；四、Node.js+Puppeteer服务端渲染，支持高保真与复杂动态内容。
2025-12-22 17:51:31
733
小白怎么学习html5_小白从基础标签练起再学布局与交互逐步掌握【学习】 初学者应按五步系统学习HTML5：一、掌握基本结构与语义化标签；二、理解块级与内联元素文档流；三、用Flexbox实现响应式布局；四、添加原生表单验证与简单JavaScript交互；五、综合构建完整静态页面。
2025-12-22 17:49:09
228
html5如何嵌入pdf文档_html5pdf嵌入代码示例与属性配置【攻略】 HTML5提供三种原生PDF嵌入方式：①标签，轻量兼容，需设src、width、height和type；②标签，支持备用内容，data和type必填；③标签，适合跨域PDF，需注意X-Frame-Options和CSP策略。
2025-12-22 17:46:03
132
如何扒html_扒取网站HTML代码与资源方法【网站】 可使用浏览器开发者工具、curl命令、wget工具、Python脚本或在线服务合法获取网页HTML源码及资源。具体包括：检查元素、Ctrl+U快捷键、curl-o保存、wget递归下载、requests+BeautifulSoup解析、在线查看器等方法。
2025-12-22 17:41:09
563
html5箭头如何布局_HTML5实现箭头元素布局技巧【箭头】 HTML5箭头可通过五种方式实现：一、CSSborder绘制纯色三角箭头；二、SVG内联绘制可缩放矢量箭头；三、Unicode字符轻量嵌入；四、CSStransform旋转矩形模拟；五、clip-path裁剪定制形状。
2025-12-22 17:37:02
232
html5怎么连接网页_HT5用a标签href属性实现网页间跳转连接【连接】 HTML5页面跳转有五种方式：一、用绝对URL跳转外部网页；二、用相对URL跳转站内页面；三、用锚点链接实现页内定位；四、用空链接结合JavaScript动态跳转；五、用download属性强制下载文件。
2025-12-22 17:35:34
322
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部