浮动元素怎么撑开父元素
html：
<div class="two">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
css：
.img1{
width: 500px;
height: 500px;
background: url(a)no-repeat;
background-size: 500px 500px;
}
.img2{
width: 500px;
height: 500px;
background: url(../csstexting/b.JPEG)no-repeat;
background-size: 500px 500px;
}
.img3{
width: 500px;
height: 500px;
background: url(../csstexting/c.JPEG)no-repeat;
background-size: 500px 500px;
}
请问一下父元素内部的3个DIV元素我设置了左浮动。怎么在不设置父元素宽度的情况下让内部的DIV横向排列啊。我要做轮播图。默认的是纵向排列的 也就是我设置了左浮动3个DIV盒子会乡下排列1500px
幕布斯7119047浏览 1418回答 2
2回答
-
30秒到达战场
我个人不喜欢浮动，先推荐一下inline-block<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>hello world</title></head><style> .two { /* 禁止内联元素换行 */ white-space: nowrap; /* 隐藏超出部分 */ overflow: hidden; } .img { /* 设置为内联块 */ display: inline-block; width: 500px; height: 500px; /* 垂直对齐为顶部对齐 */ vertical-align: top; background-size: 500px 500px; } .img1 { background: red url(a)no-repeat; } .img2 { background: green url(../csstexting/b.JPEG) no-repeat; } .img3 { background: blue url(../csstexting/c.JPEG) no-repeat; }</style><body> <div class="two"> <div class="img img1"></div><!-- 内联元素之间的空格不会被忽略 所以采用比较特殊的换行方法 --><div class="img img2"></div ><div class="img img3"></div> </div></body></html>然后是浮动的，首先要明白，元素浮动之后就脱离了文档流，不能再影响父级，所以不但不能撑开宽度，高度也不能撑开，需要用overflow: hidden;, clear: both之类的方式才能防止浮动塌陷，所以只能靠直接设置父级来决定父级宽度。 如果没有设置父级宽度，浮动的元素不但不会撑开父级，还会因为父级宽度不足向下跑，就出现你题目里向下排列的情况了。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>hello world</title></head><style> .two { /* 限制显示宽度 */ width: 100%; /* 隐藏超出部分 */ overflow: hidden; } .wrap { /* 实际内容宽度 */ width: 1500px; } .img { float: left; width: 500px; height: 500px; background-size: 500px 500px; } .img1 { background: red url(a)no-repeat; } .img2 { background: green url(../csstexting/b.JPEG) no-repeat; } .img3 { background: blue url(../csstexting/c.JPEG) no-repeat; }</style><body> <div class="two"> <div class="wrap"> <div class="img img1"></div> <div class="img img2"></div> <div class="img img3"></div> </div> </div></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript