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。

來源

2013-05-07 Reg Gordon

你可能只是這樣做：

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

來源

2013-05-07 03:41:15

謝謝拉爾夫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 
{ 

}

這應該讓你開始，如果你有任何問題，請隨時給我發消息。

來源

2013-05-07 05:11:00 Ryan

Div向左移動，另一個向右移動

回答

相關問題