div.outer { text-align: center;}div.inner { display: inline-block; wIDth: auto;}div.floatdiv { display: block; float: left; wIDth: 270px; height: 400px; margin: 5px; background-color: Gray; text-align: center;}div.clearboth { clear: both;} 和HTML：
<?xml version="1.0" enCoding="UTF-8"?><!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <link href="main.CSS" rel="stylesheet" type="text/CSS" static="screen" /></head><body> <div > <div > <div > Some text. </div> <div > Some text. </div> <div > Some text. </div> <div > Some text. </div> <div > </div> </div> </div></body>
这项工作提供了浏览器窗口足够宽,所有浮动保持在一行.如果窗口变窄,则最后一个浮动跳转到下一行浮动 – “内部”div变得与包含块“外部”一样宽,并且突然内部不再位于外部中心.
http://jsfiddle.net/BYszs/
解决方法 我想不出比 suggestion here更好的东西,即使用 media queries.以下是您的代码的实现：http://jsfiddle.net/thirtydot/BYszs/4/
@media (max-wIDth: 1123px) { div.inner { max-wIDth: 843px; }}@media (max-wIDth: 843px) { div.inner { max-wIDth: 563px; }}@media (max-wIDth: 563px) { div.inner { max-wIDth: 280px; }} 这非常麻烦,它不会(自动)支持更多的元素,但它的工作原理！
好吧,它的工作时间是browsers that support media queries.
如果你需要支持其他浏览器,我建议使用轻量级Respond.js.尽管如此,可以说你也可以使用JavaScript(它可以自动支持任意数量的元素)而不是媒体查询.
总结以上是内存溢出为你收集整理的html – CSS – 如何使用包裹的浮动内部制作DIV只需要保持浮动所需的大小？全部内容，希望文章能够帮你解决html – CSS – 如何使用包裹的浮动内部制作DIV只需要保持浮动所需的大小？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）