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，我想将其浮动到左侧。

CSS

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

我添加了inline-block值，因为它似乎最适合。问题是让pane-node-field-short-place-intro div恰好位于第一个块的右侧。它似乎想隐藏在它背后（虽然我的文字似乎没问题）。我可以获得所需行为的唯一方法是使用此CSS到第二个块：

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

Answer 2

jsFiddle - CSS Floats
http://jsfiddle.net/kn9RE/9/

CSS标准化 - 确保使用第一个引用的样式表
http://necolas.github.io/normalize.css/

首先，您过度设计了前端标记。我这样说是因为你目前的标记类似于“Div Spaghetti”。我首先评估你的html代码作为一个整体，删除所有CSS并对页面结构有一个坚实的感觉。虽然有很简单的方法可以解决这个问题，但最好分析你的代码并问自己“这可以用更少的标记完成吗？”。不要急于采取简单的方法，你往往会得到一个充满不良习惯的代码库。

如果必须使用现有的HTML，您可以像这样对问题应用创可贴;

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

.pane-node-field-short-place-intro
{
max-width: 660px;
float:left;
padding: 10px 5px 0 15px;
}

.field-item even
{

}

这应该可以帮助您入门，如果您有任何疑问请随时给我留言。

Div向左浮动，另一个向右移动

2 个答案: