我觉得这是最基本的问题,经过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。
答案 0 :(得分:1)
你可以这样做:
.pane-node-field-short-place-intro {
padding: 3px 5px 0 20px;
overflow: hidden;
}
答案 1 :(得分:0)
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
{
}
这应该可以帮助您入门,如果您有任何疑问请随时给我留言。