Question

我尝试使用vertical-align：top并显示inline-block连续换行后获取所有流体元素。但它不起作用。在换行后，元素的不同高度会拍摄布局。

以下是Fiddle

示例

样式表：

    section { 
        display: block;
        max-width: 720px;
    }

    img {
        display: block;
        width: 100%;
        height: auto;
    }

    .container {
        width: 100%;
    }

    .container:after {
        content: "";
        display: table;
        clear: both;
    }

    .col {
        float: left !important;
        margin-right: 3.3333333333333335%;
    }

    .t4 {
            width: 31.11111111111111%;
    }

    .t4:nth-child(3n) {
        margin-right: 0;
    }

    .p-item {
        display: inline-block;
        vertical-align: top;
    }

HTML5

<section class="content">
    <div class="container inside">
        <div class="col t4 p-item">
            <img src="http://placehold.it/225x300/01da90/fffedb" />
                <p>Brandname<br />This is a so such very very very long Productname i can't believe! This is a so such very very very long Productname i can't believe!<br />99.00 EUR</p>
        </div>
        <div class="col t4 p-item">
            <img src="http://placehold.it/225x300/01da90/fffedb" />
                <p>Brandname<br />This is a so such very very very long Productname i can't believe!<br />99.00 EUR</p>
        </div>
        <div class="col t4 p-item">
            <img src="http://placehold.it/225x300/01da90/fffedb" />
                <p>Brandname<br />This is a so such Productname i can't believe!<br />99.00 EUR</p>
        </div>
        <div class="col t4 p-item">
            <img src="http://placehold.it/225x300/01da90/fffedb" />
                <p>Brandname<br />This is a so such very very very long Productname i can't believe! This is a so such very very very long Productname i can't believe!<br />99.00 EUR</p>
        </div>
        <div class="col t4 p-item">
            <img src="http://placehold.it/225x300/01da90/fffedb" />
                <p>Brandname<br />This is a so such very very very long Productname i can't believe! This is a so such very very very long Productname i can't believe!<br />99.00 EUR</p>
        </div>
        <div class="col t4 p-item">
            <img src="http://placehold.it/225x300/01da90/fffedb" />
                <p>Brandname<br />This is a so such very very very long Productname i can't believe!<br />99.00 EUR</p>
        </div>
        <div class="col t4 p-item">
            <img src="http://placehold.it/225x300/01da90/fffedb" />
                <p>Brandname<br />This is a so such Productname i can't believe!<br />99.00 EUR</p>
        </div>
        <div class="col t4 p-item">
            <img src="http://placehold.it/225x300/01da90/fffedb" />
                <p>Brandname<br />This is a so such very very very long Productname i can't believe! This is a so such very very very long Productname i can't believe!<br />99.00 EUR</p>
        </div>
        <div class="col t4 p-item">
            <img src="http://placehold.it/225x300/01da90/fffedb" />
                <p>Brandname<br />This is a so such very very very long Productname i can't believe! This is a so such very very very long Productname i can't believe!<br />99.00 EUR</p>
        </div>
        <div class="col t4 p-item">
            <img src="http://placehold.it/225x300/01da90/fffedb" />
                <p>Brandname<br />This is a so such very very very long Productname i can't believe!<br />99.00 EUR</p>
        </div>
        <div class="col t4 p-item">
            <img src="http://placehold.it/225x300/01da90/fffedb" />
                <p>Brandname<br />This is a so such Productname i can't believe!<br />99.00 EUR</p>
        </div>
    </div>
</section>

Answer 1

Float会强制在这些元素上显示块，这就是为什么它们不保持一条线。删除float并将父级的字体大小设置为零（以避免内联块之间的空格）。

.inside {
    font-size: 0;
}

.col {
    float: none !important;
    font-size: 16px;
}

http://jsfiddle.net/3EF8g/1/

CSS3 inline-Block不适用于流体浮动div

1 个答案: