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
2 回答
30秒到达战场
TA贡献1828条经验 获得超6个赞
我个人不喜欢浮动，先推荐一下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>
添加回答
举报
0/150
提交
取消