父元素自适应子元素高宽尺寸
直接上完整页面的代码：<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="gbk" />
<title>盒子自适应子元素尺寸</title>
</head>
<body>
<style>
.waiDiv { /* 父盒子*/
display: inline-block; /* 自适应子元素宽度*/
border: 1px solid red; /* 测试用边框 */
}
.waiDiv div{ /* 子盒子 */
/* 下面两句确保文本以单行呈现 */
word-break: keep-all;
white-space: nowrap;
min-width: 100px; /* 最小宽度*/
min-height: 20px; /* 最小高度*/
border: 1px solid green; /* 测试用边框 */
}
</style>
<div class="waiDiv">
<div></div>
</div>
</body>
</html>
HTML部分，构造简单，能体现出盒子的父子关系就行：
<div class="waiDiv">
<div></div>
</div>
CSS部分略加解释：
<style>
.waiDiv { /* 父盒子*/
display: inline-block; /* 自适应子元素宽度*/
border: 1px solid red; /* 测试用边框 */
}
.waiDiv div{ /* 子盒子 */
/* 下面两句确保文本以单行呈现 */
word-break: keep-all;
white-space: nowrap;
min-width: 100px; /* 最小宽度*/
min-height: 20px; /* 最小高度*/
border: 1px solid green; /* 测试用边框 */
}
</style>
一、父盒子
① display: inline-block; 必需。inline-block 以行内内联块方式呈现，默认无高宽值，由里面的内容决定它的高宽尺寸。
② border一句仅做测试，实际使用时可删掉。所有代码中冗余的或不需要的注释也不用保留。
二、子盒子
① word-break 和 white-space 两句，是让所有文本以一行呈现，我设置它的本意是让文本自动撑开子元素，从而观察父元素的长度变化。实际应用使用时根据需要决定存留与否。
② min-width 测试用，实际使用时不建议，因为当元素有了呈现内容，突破min-width后宽度的行为表现很怪异；min-height建议使用。
一楼的例子，当给子元素填充了需要呈现的内容（比如文本、图片），不论尺寸如何，父元素的高宽都会自动适应。应用场景其实很多，将来实践时会慢慢发现。
另外，我们也可以固定父元素的高宽或高宽中的一个，这时候可以不设置div盒子的 inline-block 呈现模式，然后加入 overflow:hidden 来防止子元素超出部分的内容外溢，这是CSS设计跑马灯的套路。此外话。
<style>
.waiDiv { /* 父盒子*/
display: inline-block; /* 自适应子元素宽度*/
border: 1px solid red; /* 测试用边框 */
}
.waiDiv div{ /* 子盒子 */
/* 下面两句确保文本以单行呈现 */
word-break: keep-all;
white-space: nowrap;
min-width: 100px; /* 最小宽度*/
min-height: 20px; /* 最小高度*/
border: 1px solid green; /* 测试用边框 */
}
</style>
<div class="waiDiv">
<div>离家日趋远，衣带日趋缓。心思不能言，肠中车轮转。</div>
</div>
外框红色边框，里框绿色边框。
如果在本页测试效果，只需要HTML代码，无需复制CSS部分（三楼已经有了），像这样：、
<div class="waiDiv">
<div>
<img src="图片地址" alt="" />
</div>
</div>
<div class="waiDiv">
<div>
<img src="http://5b0988e595225.cdn.sohucs.com/images/20190201/dd1303869e6d4be9be429d0726a02782.gif" alt="" />
</div>
</div>
<div class="waiDiv">
<div>
<img src="http://5b0988e595225.cdn.sohucs.com/images/20190201/dd1303869e6d4be9be429d0726a02782.gif" alt="" />
<img src="http://5b0988e595225.cdn.sohucs.com/images/20190201/dd1303869e6d4be9be429d0726a02782.gif" alt="" />
</div>
</div> 果真是自动适应父框的。貌似不分行？复制两个图图发出来是并列的而不是上下的。
当多复制几个，行内装不下了会换行的吧？ <div class="waiDiv">
<div>
<img src="https://www.huachaowang.com/data/attachment/forum/202203/25/074353otzgpl1z00lht079.jpg" alt="" />
<img src="http://5b0988e595225.cdn.sohucs.com/images/20190201/dd1303869e6d4be9be429d0726a02782.gif" alt="" />
<img src="https://www.huachaowang.com/data/attachment/forum/202203/25/074353otzgpl1z00lht079.jpg" alt="" />
</div>
</div> 遇到不同高度的按大的图图撑开，高度小的靠下排列。貌似再多弄张图图还是横排，不知道这个会不会一直不换行。 呵呵，多复制了几张现成的图图，发现下面出现滚动条。看起来一直都不会换行的。 红影 发表于 2022-3-25 10:34
果真是自动适应父框的。貌似不分行？复制两个图图发出来是并列的而不是上下的。
当多复制几个，行内装不下 ...
不分行，属于是不折行，有子元素的一下两句决定的：
word-break: keep-all;
white-space: nowrap
子元素没有这两句，就会自动换行。
图片什么时候换行？宽度总和超出子元素的宽度时。这里，子元素的宽度不受它的父元素限制，但受其祖上的元素控制，780px 马黑黑 发表于 2022-3-25 12:16
不分行，属于是不折行，有子元素的一下两句决定的：
word-break: keep-all;
好像超过780也不分行，我刚才多扔几张图图进去，直接把下面的滑动条拉开了，就是不分行{:4_173:} 红影 发表于 2022-3-25 14:18
好像超过780也不分行，我刚才多扔几张图图进去，直接把下面的滑动条拉开了，就是不分行
有那两个属性，它永远不会分行的 马黑黑 发表于 2022-3-25 18:50
有那两个属性，它永远不会分行的
愿挨是这样，很霸道{:4_189:} 红影 发表于 2022-3-25 22:22
愿挨是这样，很霸道
其实呢，人们致力于解决的是折行问题，我这里弄得是不折行的效果 马黑黑 发表于 2022-3-25 22:37
其实呢，人们致力于解决的是折行问题，我这里弄得是不折行的效果
各有各的需要，在不同场景里，可能还是需要的呢。 红影 发表于 2022-3-25 22:45
各有各的需要，在不同场景里，可能还是需要的呢。
都有的 马黑黑 发表于 2022-3-25 22:49
都有的
在黑黑的介绍里，知道了这两句语句的作用{:4_187:} 红影 发表于 2022-3-25 23:00
在黑黑的介绍里，知道了这两句语句的作用
{:5_108:}
页:
[1]