Question

我正在制作产品展示页面。我希望我的div像这个网址中的第二个示例一样：http://css-tricks.com/examples/FluidEqualHeightFauxColumns/

但是同一行中的div数量每次都可能不同。如果有太多的div，那些将继续下一行。

没有JavaScript可以做到这一点吗？

提前致谢！

HTML：

<div class="outer">
    <div class="inner">aaaaaaaaaaa<br />aaaaaaaaaaa</div>
    <div class="inner">2</div>
    <div class="inner">3aaaaaaa</div>
    <div class="inner">4</div>
<div />

.outer
{
    overflow: hidden;
    width: 500px; /* or a fixed width */
}

CSS：

.inner
{
    float: left;

    /* style as you please */
    border: solid 1px black;
}

Answer 1

试试这个：

<div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
<div />

CSS：

.outer
{
    overflow: hidden;
    width: 80%; /* or a fixed width */
}

.inner
{
    float: left;

    /* style as you please */
    width: 64px;
    height: 64px;
}

外部div将使其高度适应所包含的物品，而内部物品将始终保持其精确尺寸。当外部div太小时，内部盒子将流向新的线。这不是你想要的吗？

DIV等高，流体宽度和各种柱子

1 个答案: