float的垂直对齐方式:left div's

发布于 2024-10-07 19:37:01 字数 672 浏览 2 评论 0原文

我有大约 10 个宽度相等但高度不同的 div,我希望它们尽可能紧密地组合在一起。

当设置为向左浮动时,它们不会垂直彼此对齐,而是与上面“行”的底部对齐。

我在下面模拟了一个小例子,想要去掉空白。您有什么建议吗?我仅限于使用这种格式,因为内容是外部交付的。

干杯

<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>

I have about 10 div's of equal widths but varying height and I want them to fit together as tight as possible.

When set to float left they do not line up to each other vertically but instead are aligned to the bottom of the "row" above.

I've mocked up a little example below and want to get rid of the white space. Do you have any suggestions. I'm limited to using this format because the content that is delivered externally.

Cheers

<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

天邊彩虹 2024-10-14 19:37:01

尝试将第一个向左浮动,然后将下一个向右浮动,下一个向左浮动,下一个向右浮动......

编辑-回应评论。

如果您知道您将获取的 span 的最大数量(并假设它不比您所说的 10 个多得多(因为此方法可能会很快变得非常混乱),并假设 CSS3 是不是您可以尝试这样的选项,

<style>
    span, /* all spans get display and width, odd spans get float:left */
    span+span+span, 
    span+span+span+span+span, 
    span+span+span+span+span+span+span {
        display:block;
        width:250px;
        float:left;
    }

    span+span, /* even spans get float:right */
    span+span+span+span, 
    span+span+span+span+span+span, 
    span+span+span+span+span+span+span+span {
        float:right;
    }
</style>

您需要不断添加 span+span+... 直到达到您将拥有的连续最大数量。只匹配八个。所以这不是最漂亮的方法!

Try floating the first one left, then next one right, the next one left, and the next one right ....

EDIT - In response to comments.

If you know the maximum number of span's that you will ever fetch (and assuming it's not much more than the 10 you stated (as this method could get very messy very fast), and assuming CSS3 is not an option you could try something like this,

<style>
    span, /* all spans get display and width, odd spans get float:left */
    span+span+span, 
    span+span+span+span+span, 
    span+span+span+span+span+span+span {
        display:block;
        width:250px;
        float:left;
    }

    span+span, /* even spans get float:right */
    span+span+span+span, 
    span+span+span+span+span+span, 
    span+span+span+span+span+span+span+span {
        float:right;
    }
</style>

You'd need to keep adding span+span+...'s until you've reached the maximum number of consecutive ones you will ever have. The above only matches eight. So it's not the prettiest method!

箹锭⒈辈孓 2024-10-14 19:37:01

您的场景可能需要更多说明。

如果它们始终相同的高度,您可以对它们的排列进行硬编码。修复你的模型:

<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left; margin-top: -80px;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>

但这非常明显,可能对你没有帮助,因为它们可能具有不确定的随机高度。在这种情况下,由于它们始终具有相同的宽度,并且您始终有 10 个,因此您可以将它们分成 3 或 4 个垂直堆叠,然后使每个堆叠彼此齐平。

<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
</div>
<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:red; float:left;"></div>
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
</div>
<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:80px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:140px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:160px; background-color:#354689; float:left;"></div>
</div>

Your scenario could use more clarification.

If they are always the same height, you can hard code their arrangement. To fix your mockup:

<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left; margin-top: -80px;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>

But that's pretty obvious and probably doesn't help you because they probably have indeterminably random heights. In that case, since they're always the same width and you always have 10 of them, you can group them in vertical stacks of 3 or 4, and then make each stack flush with one another.

<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
</div>
<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:red; float:left;"></div>
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
</div>
<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:80px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:140px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:160px; background-color:#354689; float:left;"></div>
</div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文