Html 内联块不在一行中_Html_Css

Html 内联块不在一行中

html css

Html 内联块不在一行中,html,css,Html,Css,我有几个不在一行中出现的内联块。您可以将其视为小提琴： CSS: HTML: 标题A 智者是一个智者，而智者是进化而来的。标题B Lorem ipsum dolor sit amet，是一位杰出的献身者。整数posuere pharetra elit，在porttitor est scelerisque eget中。标题C 在《自由尼西》中，马莱苏阿达·菲利斯·普尔文纳坐在阿梅特的位子上。莫比·托托·利奥，奥特里斯。通过使用它进行测试，根据class.desc中div的文本行数，将cl

我有几个不在一行中出现的内联块。您可以将其视为小提琴：

CSS:

HTML:


标题A
智者是一个智者，而智者是进化而来的。
标题B
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数posuere pharetra elit，在porttitor est scelerisque eget中。
标题C
在《自由尼西》中，马莱苏阿达·菲利斯·普尔文纳坐在阿梅特的位子上。莫比·托托·利奥，奥特里斯。

通过使用它进行测试，根据class

.desc

中div的文本行数，将class

.card

的div放置在不同的垂直高度，即使

.desc

div具有固定高度。

使用

垂直对齐：top

这里更新了JSFIDLE:

以后不要只把代码放在一堆东西里。先把它贴在这里。

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;
}

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