float布局的元素为什么会换行，如何解决
如图所示：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main{
width:740px;
margin:0 auto;
position: relative;
background:lightsalmon;
height:800px;
}
.wrap{
position: absolute;
left: 50%;
bottom: 4px;
color: #9DA2AD;
z-index: 3;
padding: 0px 16px;
height: 24px;
border-radius: 16px;
background: lightblue;
transform:translateX(-50%);
}
.wrap div{
line-height: 24px;
float:left;
}
</style>
</head>
<body>
<div class="main">
<div class="wrap">
<div class="left1">sample text</div>
<div class="left2">left2 content left2</div>
<div class="left31">left31 left31 left31 left31 left31 </div>
<div class="left32">left32</div>
<div class="left">left33</div>
<div class="left4">left4 content</div>
</div>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
.wrap的定位，left为50%，所以宽度只剩下了50%，也就是370px，再去掉左右padding，还剩338px，显示不下了啊，不换行才怪...是你这个.wrap不够宽，就挤下来了
宽度不够，放不下，所以换行