css - Div 向左浮动，另一个内联向右

Question

感觉这是最基础的问题，搞了 5 年 CSS，我应该知道答案了。

我有两个 div，类为 pane-node-field-imageown 和 pane-node-field-short-place-intro。它们位于我的页面的顶部，该页面被包装在类 burr-flipped-content-inner 的 div 中。

HTML

<div class="burr-flipped-content-inner burr-flipped-content-region-inner panel-panel-inner">
    <div class="panel-pane pane-entity-field pane-node-field-imageown">
        <div class="panel-separator"></div>
        <div class="panel-pane pane-entity-field pane-node-field-short-place-intro">
            <div class="panel-separator"></div>
            <div class="panel-pane pane-vtiews-panes pane-og-nodes-panel-pane-2">
            </div>

对于具有 pane-node-field-imageown 类的 div，我想将其 float 到左侧。

CSS

.pane-node-field-imageown
{
    float:left;
    display: inline-block;
}

我添加了 inline-block 值，因为它看起来最适合。问题是让 pane-node-field-short-place-intro div 恰好位于第一个 block 的右侧。它似乎想躲在它后面(尽管我的文字似乎没问题)。我可以获得所需行为的唯一方法是将此 CSS 用于第二个 block :

.pane-node-field-short-place-intro {
    display: table;
    padding: 0 10px;
}

.pane-node-field-short-place-intro .pane-content {
    background: none repeat scroll 0 0 #444444;
    padding:10px;
}

这感觉不对。我的页面可以是viewed here for reference .

Answer 1

你可以这样做:

.pane-node-field-short-place-intro {
padding: 3px 5px 0 20px;
overflow: hidden;
}