1

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

这是一个示例小提琴

样式表：

    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>
4

1 回答 1

1

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

.inside {
    font-size: 0;
}

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

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

于 2013-08-08T09:46:40.250 回答