跨度对齐facebook块的底部。如何与顶部对齐？

Question

我有这段代码，我试图将一些文本内容放在Facebook页面插件旁边。我正在使用此代码，但我的内容与Facebook页面插件的底部对齐。如何让它与顶部对齐呢？

    <span style="display:inline;">Some content here</span>

    <span style="display:inline;"><div class="fb-page" data-href="https://www.facebook.com/page" data-width="400" data-height="500" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div></span>

看起来像这样：

Answer 1

您可以创建两个包含父div的列。然后你只需将每列浮动到各自的一侧。示例JSFiddle。

<强> HTML

<div class="wrapper">
    <div class="align-left">
        <span>Some content here</span>
    </div>

    <div class="align-right">
        <div class="fb"></div>
    </div>
</div>

<强> CSS

//you can ignore the .fb css class, it's just for the example
.fb {
    background-color: #ccc;
    height: 400px;
    width: 300px;
}

.wrapper {
    height:500px;
    width: 400px;
}

.align-left {
    float: left;
    width: 200px;   
}

.align-right {
    float: right;
    width: 200px;
}