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

问题描述：

我有一种感觉，这是最基本的问题，经过5年的CSS搞乱之后，我应该知道答案。Div向左移动，另一个向右移动

我有两个div s与类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类股利，我想它漂浮到左边。

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。

答

你可能只是这样做：

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

谢谢拉尔夫thatsjust我之后。当我有机会的时候，我将有一个阅读溢出。 – 2013-05-07 04:00:05

很高兴帮助。 “overflow：hidden”对于很多事情来说非常方便。在这种情况下，它会阻止非浮动元素缠绕在它旁边的浮动元素上，所以这是一种很好的列操作方式。 – 2013-05-07 04:44:51

答

的jsfiddle - CSS花车
http://jsfiddle.net/kn9RE/9/

CSS正常化 - 务必使该FIRST引用的样式表
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向左移动，另一个向右移动

相关推荐