前提:
如图,有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;*/}