如何在每一行中将可变宽度和高度的框向左垂直放置？

发布于 2024-11-25 13:09:11 字数 669 浏览 1 评论 0原文

我有很多盒子（显示：内联块+浮动：左）具有各种宽度和高度，如下所示：

AA BB CC DDD EE FF GG
   BB    DDD    FF
         DDD

而且我不知道该怎么做，当盒子必须被包裹时，它将在下一个“中对齐”线”这样：

AA BB CC DDD EE FF GG
   BB    DDD    FF
         DDD
EE

不像自然浮动：左：

AA BB CC DDD EE FF GG
   BB    DDD    FF EE
         DDD

真实示例（当前状态）：

BAD 定位

预期结果我想实现：

在此处输入图像描述

jsFiddle 演示： 此处

原文

I have lot of boxes (display: inline-block + float: left) with variety of width and height like this:

AA BB CC DDD EE FF GG
   BB    DDD    FF
         DDD

And i don't know how to do, that when box have to be wrapped, it will be aligned in next "line" like that:

AA BB CC DDD EE FF GG
   BB    DDD    FF
         DDD
EE

Not as natural float: left:

AA BB CC DDD EE FF GG
   BB    DDD    FF EE
         DDD

Real example (current state):

BAD positioning

Expected result wich i want to achieve:

enter image description here

jsFiddle demo: here

分享到QQ

分享到微博

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

发布评论

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

左秋 2024-12-02 13:09:11

在您的演示中，您同时拥有 float: left 和 display: inline-block。 float: left 强制 display: block，因此 display: inline-block 什么也不做。

您可以使用 display: inline-block; 达到您想要的结果。垂直对齐：顶部。

参见： http://jsfiddle.net/tdSnH/1/

回复收藏 0 原文

江湖正好 2024-12-02 13:09:11

<style>
    #container{
       min-width:100px;
       max-width:1024px;/*see your boxes' container width*/
    }
   #container .item{
      float:left;
      min-width:10px;/*some value*/
      max-width:256px; /* #container with / item.length */
    }
</style>
<div id="container">
    <div class="item">a</div>
    <div class="item">bbbbb</div>
    <div class="item">ccc</div>
    <div class="item">d</div>
</div>

<style>
    #container{
       min-width:100px;
       max-width:1024px;/*see your boxes' container width*/
    }
   #container .item{
      float:left;
      min-width:10px;/*some value*/
      max-width:256px; /* #container with / item.length */
    }
</style>
<div id="container">
    <div class="item">a</div>
    <div class="item">bbbbb</div>
    <div class="item">ccc</div>
    <div class="item">d</div>
</div>

回复收藏 0 原文

~没有更多了~