1

我有一种感觉，这是最基本的问题，在搞了 5 年 CSS 之后，我应该知道答案了。

我有两个s和divs 类。它们位于我页面的顶部，该页面包含在带有 class 的 div 中。pane-node-field-imageownpane-node-field-short-place-introburr-flipped-content-inner

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-introdiv 很好地坐在第一个块的右侧。它似乎想躲在它后面（尽管我的文字似乎没问题）。我可以获得所需行为的唯一方法是将此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;
}

这感觉不对。我的页面可以在这里查看以供参考。

4

2 回答 2

1

你可以这样做：

.pane-node-field-short-place-intro {
padding: 3px 5px 0 20px;
overflow: hidden;
}
于 2013-05-07T03:41:15.813 回答
0

jsFiddle - CSS 浮动
http://jsfiddle.net/kn9RE/9/

CSS Normalize - 确保首先引用样式表
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
{

}

这应该让你开始，如果你有任何问题，请随时给我发消息。

于 2013-05-07T05:11:00.110 回答