我正在尝试获得一个容器div,它将水平滚动到视口之外.有点像全屏幻灯片,开头是#a,最后是#c. #a和#c都是固定宽度div,#b是动态宽度图像内容.我遇到的问题是让#container动态改变其宽度以适应#b.将#container width设置为auto或100%只使用视口宽度.
我在追求的是什么:
[- viewport width -] --#container--------------------------------------- | -------------------------------------------- | | | #a | #b... | #c | | | -------------------------------------------- | ---------------------------------------------------
我的加价:
#container { height:400px; } #a { float:left; width:200px; height:400px; } #b { float:left; width:auto; height:400px; } #c { float:left; width:200px; height:400px; } <div id="container"> <div id="a">fixed width content</div> <div id="b">dynamic width content</div> <div id="c">fixed width content</div> </div>
编辑:我可以用表格做到这一点,但如果可能的话,我想避免这样做.
编辑2:这是使用表格的工作版本:
#container { height:400px; background:#fff; } #a { width:200px; height:400px; background:#ccc; } #b { height:400px; background:yellow; white-space: Nowrap; } #c { width:200px; height:400px; background:#ccc; } <table cellpadding="0" cellspacing="0"> <tr> <td id="a"> a </td> <td id="b"> <img src="..." /> <img src="..." /> <img src="..." /> </td> <td id="c"> b </td> </tr> </table>
解决方法
<div id="container"> <div id="a">fixed width content</div> <div id="b"> <img src="http://karenrothart.com/yahoo_site_admin/assets/images/Landscape_Panorama.13130817_large.jpg" />dynamic width content dynamic width content dynamic width content dynamic width content </div> <div id="c">fixed width content</div> </div>
这是一个很好的CSS:
div { height: 400px; } #container { position: relative; /* needed for absolutely positioning #a and #c */ padding: 0 200px; /* will offset for width of #a and #c; and center #b */ border: green 3px dotted; /* just for the show */ float: left; /* To dynamicaly change width according to children */ } #a,#b { position: absolute; /* causes #a and #b to not respect padding of #container and also gives it its place */ top: 0; width:200px; left: 0; } #c { right: 0; }
漂亮而有光泽的例子:http://jsfiddle.net/KefJ2/
如果您需要多个图像而不是添加此图像:
#b { white-space: Nowrap; /* causes all direct child elements to be in one line */ }
更多图片的示例:http://jsfiddle.net/KefJ2/1/显然你必须在#b中使用文本和图像布局,但这应该很容易:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。