Question

我有几个内联块没有出现在一行中。您可以将其视为小提琴：http://jsfiddle.net/24vjC/

CSS：

body {
    font-family:"Open Sans";
    margin: 0px;
    padding: 0px;
}
.card-row {
    position: absolute;
    left: 0px;
    right: 0px;
    text-align: center;
    background-color: rgba(204, 255, 187, 0.5);
    /*vertical centering*/
    top: 50%;
    margin-top: -121px;
}

.card {
    width: 200px;
    position: relative;
    background-position-y: 32px;
    background-image: url('http://placekitten.com/200/100');
    background-repeat: no-repeat;
    display: inline-block;
    cursor: pointer;
    transform: scale(0.7);
    transition: all .5s;
    -webkit-transform: scale(0.7);
    -webkit-transition: all .5s;
}
.card:hover {
    transform: scale(1);
    -webkit-transform: scale(1);
}
.card .title {
    text-align: center;
    font-variant: small-caps;
    background-color: #CCC;
    padding: 5px;
    font-weight: 800;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.card .desc {
    margin-top: 100px;
    text-align: center;
    background-color: #CCC;
    padding: 5px;
    font-size: 11px;
    height: 100px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

HTML：

<body>
    <div class="card-row">
        <div class="card ca-titleA">
            <div class="title">Title A</div>
            <div class="desc">Phasellus tincidunt sapien a sapien eleifend volutpat sed ac purus.</div>
        </div>
        <div class="card ca-titleB">
            <div class="title">Title B</div>
            <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere pharetra elit, in porttitor est scelerisque eget.</div>
        </div>
        <div class="card ca-titleC">
            <div class="title">Title C</div>
            <div class="desc">In imperdiet libero nisi, quis malesuada felis pulvinar sit amet. Morbi tortor leo, ultrices.</div>
        </div>
    </div>
</body>

使用它进行测试时，具有类.card的div将根据其中包含类.desc的div中的文本行数放置在不同的垂直高度，即使.desc 1}} divs有一个固定的高度。

Answer 1

使用vertical-align:top

在这里更新了jsfiddle：http://jsfiddle.net/24vjC/1/

内联块不是连续的

1 个答案: