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>
...全文
3013 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>

在网上找的, 希望对你有帮助!
【测绘摄影测量】空间前方交会数据
【测绘摄影测量】空间前方交会数据
1123bevdet-op-optimize.onnx
1123bevdet-op-optimize.onnx
ContextCapture倾斜摄影空三建模最快方案2018
源码下载地址： https://pan.quark.cn/s/40677b766bda "ContextCapture 倾斜摄影快速、创新及全面空三建模与单机集群硬件部署方案2018" 此资源聚焦于倾斜摄影（ContextCapture）空三建模及单机集群硬件部署方案，致力于为用户呈现最快、最优成本效益的台式工作站、移动工作站、并行集群的多样化部署选择。以下是该资源的详细知识点概述： 一、相关设备型号说明 * UltraLAB 是西安坤隆计算机科技有限公司推出的专属图形工作站品牌，具备三大卓越优势：顶尖的计算硬件架构、精准的行业应用定制服务、专业的硬件系统优化工艺。 二、硬件部署方案 * 台式工作站部署建议：设备特色在于当前市场上最快的台式计算架构，适用于办公场景下，部门层级常规的倾斜摄影空三处理、三维建模。 * 便携式工作站部署建议：设备特色在于当前市场上最快的移动计算架构，适用于移动倾斜摄影的空三处理、三维建模工作站。 * 大数据量处理工作站推荐：设备特色在于极限自动超频加速与16个并行存储构造，具备空三处理和三维建模最强的计算性能及海量高速并行存储性能。 * 多设备并行计算集群部署建议：针对海量图像数据计算产生的巨大需求，单机计算能力处理时间过长，效率不高，通过多台机器并行集群，进行空三处理、三维建模，显著减少处理时间。 三、部署方案深入解析 * 2.1 倾斜摄影建模（台式工作站）部署方案：设备特色在于最高的计算处理能力~6核5.2GHz，内存最大配置可达64GB，配备最新图灵架构的RTX显卡，相比市场其他品牌机器（单CPU、双Xeon处理器）更快、更具成本效益。 * 2.2 倾斜摄影建模（移动便携式工作站）硬件部署方案：设备特色在于最高的计算处理能力~6...
2026大童保险好赔时光（理赔案例合集）
2026大童保险好赔时光（理赔案例合集）
实用代码脚本易语言源码SQL到文本
实用代码脚本易语言源码SQL到文本
CSS

61,120

社区成员

60,701

社区内容

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

加载中

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

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

+ 用AI写文章