CSS
div 嵌套 float 内部div不换行
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区想做一个图片横向滚动的效果，发现很难让多个float:left的div在一行显示，不知道怎样才能实现，或者有没有
其他的办法实现，第一次练习写这样的例子。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.divCont{
width:500px;
height:120px;
border:1px solid red;
white-space:nowrap;
overflow:auto;
}
.divShowItem{
width:78px;
height:100px;
border:1px solid green;
margin:10px 10px 10px 10px;
float:left;
display:block;
white-space:nowrap;
overflow:hidden;
}
</style>
</head>
<body>
<input type="button" value="<-" onclick="showPre()"/>
<input type="button" value="->" onclick="showNext()"/>
<div id="divCont" class="divCont">
<div class="divShowItem">1</div>
<div class="divShowItem">2</div>
<div class="divShowItem">3</div>
<div class="divShowItem">4</div>
<div class="divShowItem">5</div>
<div class="divShowItem">6</div>
</div>
</body>
</html>
其他的办法实现，第一次练习写这样的例子。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.divCont{
width:500px;
height:120px;
border:1px solid red;
white-space:nowrap;
overflow:auto;
}
.divShowItem{
width:78px;
height:100px;
border:1px solid green;
margin:10px 10px 10px 10px;
float:left;
display:block;
white-space:nowrap;
overflow:hidden;
}
</style>
</head>
<body>
<input type="button" value="<-" onclick="showPre()"/>
<input type="button" value="->" onclick="showNext()"/>
<div id="divCont" class="divCont">
<div class="divShowItem">1</div>
<div class="divShowItem">2</div>
<div class="divShowItem">3</div>
<div class="divShowItem">4</div>
<div class="divShowItem">5</div>
<div class="divShowItem">6</div>
</div>
</body>
</html>
...全文
相关推荐
纯css实现3D图像轮转效果
主要为大家详细介绍了纯css实现3D图像轮转效果，css制作的3D图像轮转，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS中如何把Span标签设置为固定宽度.pdf
...
让横向排列的几个浮动(float:left)的子div居中显示
div设置成float之后，在父div中设置text-align:center，就无法使子div居中显示，下面有个不错的解决方法，大家可以参考下
div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
div ul li 嵌套的使用在网页布局中很常见，最主要的问题就是如何解决增加多个li后DIV高度自动适应问题，本文有个不错的示例，可以解决此问题，大家可以尝试运行下
DIV多层嵌套margin-top的BUG问题
本篇文章小编为大家介绍，关于DIV多层嵌套margin-top的BUG问题，有需要的朋友可以参考一下
