前提：
如图，有n个虚线div，未设定样式时每个div独占一行，且宽度均为100%。
现有一需求，要求每个虚线div宽度为文字宽度，并横向排列，排不下时自动换行。
<style>.area {width: 800px;padding: 45px 30px;margin-bottom: 30px;outline: 6px solid #000;}.area div[class*="text"] {outline: 2px dashed #395792;}.area div[class*="text"]:hover {background-color: #ebeef5;}.area span {word-break: break-word;}.area p {margin: 0;}.area .container {background-color: #c0c0c0;padding: 10px;}</style><div class="area"><div class="container"><div class="text1"><span>text1</span></div><div class="text2"><span>text2text2text2text2text2text2text2text2text2text2text2text2text2text2<p> </p></span></div><div class="text3"><span>text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3text3</span></div></div></div>
解决方法：
方法1：子 div 设定 float: left;
方法2：父 div 设定 display: flex;（无需指定子 div 的样式）
推荐方法2，因为方法1需要解决高度不一致的问题，解决这个问题还是要用到方法2，所以不如直接用方法2去实现。
解析：
方法1，子 div 设定 float: left;
如图，text2有2行文字，出现了高度不一致的问题，可以通过设定flex-wrap属性解决。
.container {overflow: hidden;/* 解决设定float无法撑开父div的问题 *//* 解决每个div高度不一致的问题display: flex;flex-wrap: wrap;*/}.container > div {float: left;}
方法2：父 div 设定 display: flex;
.container {display: flex;flex-wrap: wrap;/* 还可以设定div的居中方式justify-content: center;*/}
