html – 收缩包装缩小以适应一个div以在css中回填浮动的div

概述http://jsfiddle.net/zEcn3/12/ 我试图获得一个div内容，调整大小适合一行的div数量。因此，当窗口大于所有项目div的组合时，该示例工作正常，因此它们全部在一行中，但是当窗口调整大小时，其中一个项目将回填到下一行，内容div的宽度为100 ％而不是收缩包装。 我想要这样做的原因是，我可以将内容与内容上的菜单栏对齐，缩小到组合回流内容的大小。 HTML： <div cl http://jsfiddle.net/zEcn3/12/

我试图获得一个div内容，调整大小适合一行的div数量。因此，当窗口大于所有项目div的组合时，该示例工作正常，因此它们全部在一行中，但是当窗口调整大小时，其中一个项目将回填到下一行，内容div的宽度为100 ％而不是收缩包装。

我想要这样做的原因是，我可以将内容与内容上的菜单栏对齐，缩小到组合回流内容的大小。

HTML：

<div >    <div >        <div >Hello.</div>        <div >Hello.</div>        <div >Hello.</div>        <div >Hello.</div>        <div >Hello.</div>    </div></div>

CSS：

.item {    float: left;    wIDth: 70px;    border: 1px solID black;}.content {    display: inline-block;    border: 1px solID black;}.content:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hIDden;}

解决方法 一个朋友为我找出来，答案是使用媒体查询。

@media (max-wIDth: 1080px) {    #main {        max-wIDth: 640px;    }}

所以我设置每个项目div的宽度的间隔，所以当观察窗口小于一定数量时，它将容器的宽度设置为下一个级别。

总结

以上是内存溢出为你收集整理的html – 收缩包装/缩小以适应一个div以在css中回填浮动的div全部内容，希望文章能够帮你解决html – 收缩包装/缩小以适应一个div以在css中回填浮动的div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。