html - 跨度对齐到 facebook block 的底部。如何对齐到顶部？

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 包裹的列。然后你只需将每一列 float 到它们各自的一侧。示例 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;
}