css 子元素inline-block 撑开父元素，但是不换行，想要父元素设置最大宽 子元素换行如何实现
<body><divclass="wrap-span"><spanclass="inner-span">jjjj</span><spanclass="inner-span...
<body>
<div class="wrap-span">
<span class="inner-span">jjjj</span>
<span class="inner-span">oooo</span>
<span class="inner-span">oooo</span>
<span class="inner-span">oooo</span>
<span class="inner-span">oooo</span>
<span class="inner-span">oooo</span>
</div>
</body>
.inner-span{
display:inline-block;
}
.wrap-span{
white-space: nowrap;
}
这样的是父元素会随子元素宽撑开，但是我想要遍历出来的span 每2个一行。（我试过父元素设最大宽，但是子元素还是不会换行。） 展开
<div class="wrap-span">
<span class="inner-span">jjjj</span>
<span class="inner-span">oooo</span>
<span class="inner-span">oooo</span>
<span class="inner-span">oooo</span>
<span class="inner-span">oooo</span>
<span class="inner-span">oooo</span>
</div>
</body>
.inner-span{
display:inline-block;
}
.wrap-span{
white-space: nowrap;
}
这样的是父元素会随子元素宽撑开，但是我想要遍历出来的span 每2个一行。（我试过父元素设最大宽，但是子元素还是不会换行。） 展开
2个回答
展开全部
1、新建一个html文件，命名为test.html。
2、在test.html文件中，使用div标签创建一个模块，在它的里面，再使用div创建另一个模块。
3、在test.html文件中，分别给两个div设置id属性，父元素div的id为one，子元素div的id为two，主要用于下面通过此id获得div对象。
4、为了展示出明显的效果，在css标签内，使用css设置两个div的样式（高度、宽度、背景颜色），父元素的高度比子元素的高度高100px。
5、在js标签内，通过id(one)获得父div对象，给它绑定click事件，当它被点击时，使用alert()方法输出“one click”。
6、在js标签内，通过id(two)获得子div对象，给它绑定click事件，当它被点击时，使用alert()方法输出“two click”，同时使用return false来禁止子元素事件再继续执行。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.wrap-span{
white-space: nowrap;
}你这里已经设置了父元素不换行了，如果想两个一行就把white-space这个属性去掉，然后设置一下父容器的宽度就换行了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body{
padding: 20px;
background-color:#FFF;
}
.inner-span{
display:inline-block;
background-color: #2D93CA;
}
.wrap-span{
width: 100px;
}
</style>
</head>
<body>
<div id="main">
<div class="wrap-span">
<span class="inner-span">jjjj</span>
<span class="inner-span">oooo</span>
<span class="inner-span">oooo</span>
<span class="inner-span">oooo</span>
<span class="inner-span">oooo</span>
<span class="inner-span">oooo</span>
</div>
</div>
<script>
</script>
</body>
</html>
这里我加了个背景色，可以查看每个span的占位。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
