css 如何让外层的div 控制住内层div的宽度?

Posted 2023-05-09

问题补充: 当浏览器窗口缩小时内层的div图像就会超出外层div 的显示范围,我google、baidu了一天也没能找到解决方法,有的说只要外层的div 设了宽度内存的就会受限,在试过N种方法后我实在无力解决了.

要求达到的效果: 当浏览器放大或缩小时下图中红线框框住的部分应该不超出版块的范围才对。

代码如下:

<div id="divContainer" style="width: 958px;">
<div id="divLine" style="position: absolute; z-index: 1; height: 40px; left: 126px; top: 234px; width: 958px;">
<div id="divRoad" style="position: absolute; z-index: 1; background: url("images/bridge/gr_gray.png") repeat-x scroll 0% 0% transparent; height: 20px; left: 126px; top: 274px; width: 958px;">
<div id="divLeftSlider" style="position: absolute; z-index: 1; background: url("images/bridge/but.png") no-repeat scroll 0% 0% transparent; cursor: pointer; width: 10px; height: 28px; left: 121px; top: 270px;"></div>
<div id="divRightSlider" style="position: absolute; z-index: 1; background: url("images/bridge/but.png") no-repeat scroll 0% 0% transparent; cursor: pointer; width: 10px; height: 28px; left: 290px; top: 270px;"></div>
<div id="divLeftStop" style="position: absolute; z-index: 1; left: 126px; top: 298px;">榆次市境内</div>
<div id="divRightStop" style="position: absolute; z-index: 1; white-space: nowrap; left: 1036px; top: 298px;">太原市许</div>
<div id="divRoadValue" style="position: absolute; z-index: 1; background: url("images/bridge/write.png") repeat scroll 0% 0% transparent; text-align: center; border: 1px solid; width: 80px; left: 165.5px; top: 244px;">3000 m</div>
<div id="divToll" style="position: absolute; z-index: 0; cursor: pointer; left: 306px; top: 286px;">
<div id="divOffice" style="position: absolute; z-index: 0; cursor: pointer; left: 1084px; top: 286px;">
</div>
以上这些全是jquery 生成出来的,别人写好的我在改它的bug 搞到想死！！

你的div 基本上都用了position: absolute；这是将div采用绝对定位，我一般不这么做。因为绝对定位是以左上角为（0,0）定位你的div，跟换分辨率、浏览设备很容易出现位置偏移，你把position: absolute; z-index: 1;删除了应该就对了追问

我的QQ563312205 可以的话麻烦帮我远程调试一下,我试了N种方法实在没办法解决了。
谢谢！

追答

我现在用的机器比较龊(机器是2000年配的，浏览网页多了对有点费劲)，你可以将源文件打包发到我的邮箱，我帮你看一下。我的邮箱[e-mail]

参考技术A 外层宽度为固定值：如700px
内层宽度为百分比：如100%
这样就能外层控制内层了追问

根本行不通！真没你们想的这么简单...可以的话麻烦你留下QQ
thanks

参考技术B 你就不能单独写个CSS 放？绝对定位那么多，就远离文本流 东漂 西漂。你只能把整个静态页给我 好帮你调式 参考技术C 全是绝对定位，我了个擦。。 参考技术D 你都用绝对定位了，怎么可能再限制宽度呢。。。。

内层div使用了float的css样式之后，外层div高度始终为0，解决方法

因为我需要在实现两个div并排显示，所以按照网上的方法，需要把这两个div的外面再嵌一层div，然后里面的两个子div分别给float: left的css样式，虽然这样子效果上已经达到，但是如果再给外层div加个边框的话，就会发现两个子div早已跑到边框外边。打开F12一看，原来外层div的高度一直都是0。

解决方法：给外层div添加css样式

overflow: hidden; /*如果不加这个样式，内层float之后div高度会仍是0*/