根据窗口大小和大小用浮动 div 填充容器调整 div 的宽度以设置最大值

发布于 2024-11-25 19:25:35 字数 708 浏览 2 评论 0原文

我正在为一本杂志设计页面布局。它现在有 5 个不同的类别 - 每个类别都显示在主站点上左侧浮动的单独 div 内。所以现在看起来像这样，

--------------page width-------------
-category1--category2--category3-
-category4--category5-

我希望第一行和第二行中的三个类别拉伸以占据所有空间，直到它们达到设定的宽度，然后回落到较低的宽度，以便在第一行中提供更多类别空间在页面调整大小上：（最小宽度的 4 个 div 不适合页面宽度）

-----------------page width-----------
-category1  --category2  --category3 -
-category4        --category5        -

然后调整大小（一旦最小宽度的 4 个元素适合）：

------------------------page width----------
-category1--category2--category3--category4-
-category5-

这可以用 css 实现吗？（我不这么认为）或使用一些 javascript 计算。我尝试了很多，但我的java技能真的很糟糕......

非常感谢！来自维也纳的美好问候

原文

im working on a page layout for a magazine. it now has 5 different categories - each of the categories is displayed on the main site inside a separate div floating left. so it looks like this

--------------page width-------------
-category1--category2--category3-
-category4--category5-

now i would like to have the three categories in first and second line stretch to take all the space until they reach a set amount of width and then fall back to a lower width to give more categories room in the first row on a page resize:
(4 divs with min width does NOT fit inside the page width)

-----------------page width-----------
-category1  --category2  --category3 -
-category4        --category5        -

then on resize (as soon as 4 elements with the min-width fit in):

------------------------page width----------
-category1--category2--category3--category4-
-category5-

is this possible with css? (i don't think so) or with some javascript calculation. i tried a lot, but my java skills are just really bad ...

thanks so much! nice greets from vienna

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暮倦 2024-12-02 19:25:35

我认为你不需要任何 JavaScript 来实现这一点。我认为你想要的是你的CSS中的媒体查询。

CSS 能够针对特定画布宽度、设备宽度或方向的 CSS 规则。所以你可以有这样的标记

<div class="container">
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
</div>

，然后用 CSS 改变类别包装器的宽度

.category-wrapper{
    float:left;
    width:100px;
}

@media (min-width:500px) and (max-width:950px){ 
    .category-wrapper{
         width:200px;
    }
}

@media (min-width:950px) and (max-width:1024px){ 
    .category-wrapper{
         width:400px;
    }
}

，等等。

请参阅此处的媒体查询规范 http://www.w3.org/TR/css3-mediaqueries / 这里有关于这种工作方式概念的精彩入门http://www.alistapart.com/articles/responsive-web-design/

并且由于并非所有浏览器都支持它们，因此请使用 Scott Jehl 令人惊叹的 polyfill https://github.com/scottjehl/Respond 来帮助落后者。

希望这有帮助。

I don't think you need any javascript to achieve this. I think what you're after is a media query within your css.

CSS has the ability to target css rules at specific canvas widths, device widths or orientations. So you could have markup like this

<div class="container">
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
</div>

And then change the widths of the category wrappers with CSS like this

.category-wrapper{
    float:left;
    width:100px;
}

@media (min-width:500px) and (max-width:950px){ 
    .category-wrapper{
         width:200px;
    }
}

@media (min-width:950px) and (max-width:1024px){ 
    .category-wrapper{
         width:400px;
    }
}

and so on.

See the spec for media queries here http://www.w3.org/TR/css3-mediaqueries/ a great primer on the concept of this way of working here http://www.alistapart.com/articles/responsive-web-design/

and since not all browsers support them, use Scott Jehl's amazing polyfill https://github.com/scottjehl/Respond to help out the laggers.

Hope this helps.

回复收藏 0 原文

~没有更多了~