div 嵌套 float 内部div不换行

xingqiliudehuanghun 2009-01-04 01:59:42
想做一个图片横向滚动的效果，发现很难让多个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>
...全文
2968 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
萤火架构 2011-01-21
  • 打赏
  • 举报
 回复
Jquery结合div+css实现图片水平横向不间断滚动效果

http://blog.bossma.cn/javascript/jquery_div_css_picture_horizontal_scroll/
xingqiliudehuanghun 2009-01-16
  • 打赏
  • 举报
 回复
楼上的仁兄谢谢你的回复，你的做法我试了下还是不能解决我的问题，我想实现的效果是
无论是div也好,li也好，就让他们在一行显示不允许他们换行,这样我就可以像控制电影的胶片
一样来控制他们了，只要一个移动了其他的都移动。不知道你是否明白我的意图

<!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; 

} 

#divCont ul{ 

	overflow:auto;

	width:100%;

	height:100%;

	margin:0;

}

#divCont li{

	width:90px; 

	height:100px; 

	border:1px solid green;

	margin-left:6px;

	margin-top:8px;

} 

</style> 

</head> 

<body> 



<input type="button" value=" <-" onclick="showPre()"/> 

<input type="button" value="->" onclick="showNext()"/> 

<div id="divCont"> 

<ul>

    <li style="float:left; clear:left;"><img height="100%" width="100%"  src="333" /></li>

    <li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

    <li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

    <li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

    <li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

    <li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

    <li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

    <li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

    <li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

    <li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

    <li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

    <li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

    <li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

</ul>

</div> 

</body> 

</html>
flush_520 2009-01-06
  • 打赏
  • 举报
 回复 


<!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; 

} 

#divCont ul{ 

overflow:auto; 

width:100%;

height:100%;

margin:0;

}

#divCont li{

width:90px; 

height:100px; 

border:1px solid green;

margin-left:6px;

margin-top:8px;

} 

</style> 

</head> 

<body> 



<input type="button" value=" <-" onclick="showPre()"/> 

<input type="button" value="->" onclick="showNext()"/> 

<div id="divCont"> 

<ul>

<li style="float:left; clear:left;"><img height="100%" width="100%"  src="333" /></li>

<li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

<li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

<li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

<li style="float:left; clear:none;"><img height="100%" width="100%"  src="333" /></li>

</ul>

</div> 

</body> 

</html>


可用li代替div 像div table都是整体布局的 一般不做位置变动. 位置变动一般都是内部的li ul th p td h1等
summer0214 2009-01-04
  • 打赏
  • 举报
 回复
http://blog.csdn.net/summer0214/archive/2008/12/28/3628149.aspx 看看我這篇博文，或許是你要的。
ztlyz84 2009-01-04
  • 打赏
  • 举报
 回复 
<style type="text/css"> 

<!-- 

#demo { 

    background: #FFF; 

    overflow:auto; 

    border: 1px dashed #CCC; 

    width: 500px; 

} 

#demo img { 

    border: 3px solid #F2F2F2; 

} 

#indemo { 

    float: left; 

    width: 800%; 

} 

#demo1 { 

    float: left; 

} 

#demo2 { 

    float: left; 

} 

--> 

</style> 

 



<div id="demo"> 

<div id="indemo"> 

<div id="demo1"> 

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 

</div> 

<div id="demo2"></div> 

</div> 

</div>

在网上找的, 希望对你有帮助!
html+div+css初级入门到制作企业站视频课程
本套html,div&css;课程完全初级, 通过学习DIV+CSS, 了解分清html div css三者关联&作用,通过一个企业站首页排版掌握html,div+css
div里嵌套div设置不换行的方法
一、Float:left; <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置div不换行显示</title> <style> .one { float:...
div嵌套的div溢出时换行
[code="html"] .nobreak { word-wrap: break-word; word-break: normal; width:400px; } 1 2 3 4 5 6 [/code] 也可以用以下方法，但以下方法不可设置item的宽与高 [code="html"] .nobreak { ...
html中的div的嵌套,HTML中div嵌套div的margin不起作用
下面介绍一下div嵌套div时margin不起作用的解决方案。顺便科普下margin的定义和用法。div嵌套的HTML代码：Document*{margin: 0;padding: 0;}body{width: 100%;height: 100%;background-color: dodgerblue;}.box{width: 300px;height: 300px;margin: 30px;b...
div中嵌套html页面,如何在div中嵌套div
请问如何在一个大的div里横向嵌套两个小的div我嵌套的div会换行，没有办法两个并排在一起 因为照着书上做的，所以使Test $(function(){ }); 此处显示 id "rightmain" 的内容 此处显示 id "nav" 的内容 加了float:left,这样就并排了。float:left指都靠左边浮动。一个大的DIV中嵌套两个小的DIV一左一右这是代码.max { width:...
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章