兩個內聯表單元格DIV導致其中一個的垂直移位

我搜索了這個，但我似乎無法找到類似的情況下有答案。對不起，如果它已被解決以前。兩個內聯表單元格DIV導致其中一個的垂直移位

我有一個HTML頁面，看起來，在基本層面上，這樣的一段：

<div id=wrap> 
    <div id=lb> 
     Content 
    </div> 
    <div id=rb> 
     Content 
    </div> 
</div>

這些基本上都是我的身體分解成左側部分（LB）和右部（RB）。隨着相應的CSS（未示出CSS復位，但通用的一種是在使用爲好; ...指示其他代碼存在，但N/A）：

#bwrap { 
width: 100%; 
height: 400px; 
display:inline-table; 
... 
} 
#lb { 
width: 71.5%; 
display: table-cell; 
... 
} 
#rb { 
    width: 28.5%; 
    display: table-cell; 
    padding: 30px 6px 7px 6px; 
    border-left: 1px #6A6A6A solid; 
    border-right: 1px #6A6A6A solid; 
}

我開始從右到左和填充在內容在#RB;一切都很完美。但是，一旦我開始在#LB工作，我注意到#RB中的所有內容都向下移動，以與＃LB的內容的底部對齊。即使內容和DIV重疊。這樣做的具體內容是嵌入到#LB中的谷歌日曆。除了在#RB中向下移動外，一切看起來都完全正常。

任何人都知道我錯了哪裏？我試圖弄糊塗和絕對定位，但沒有任何影響，其中大部分實際上使情況變得更糟。

來源

2012-01-05 user1133213

謝謝大家！我使用了你們所建議的一些，現在已經很完美了！ – user1133213 2012-01-06 02:53:03

-2

不要使用display：table-cell，它很醜並且不能在所有瀏覽器上始終如一地工作，您應該可以使用浮動和寬度進行很好的操作。

在同一元素上使用填充或邊距作爲定義寬度的元素不是一個好主意，再次，瀏覽器不兼容性使其成爲一個惡夢。

我建議你做這樣的事情：

<div id="wrap"> 
    <div id="lb"> 
     content 
    </div> 
    <div id="rb"> 
     <div id="rp"> 
      more content 
     </div> 
    </div> 
</div>

與CSS：

#wrap { 
width: 100%; 
height: 400px; 
display: block; 
... 
} 
#lb { 
width: 71.5%; 
display: inline; //not actually necessary 
float: left; 
... 
} 
#rb { 
    width: 28.5%; 
    display: inline; //again not necessary 
    float: right; 
} 
#rp{ 
    border-left: 1px #6A6A6A solid; 
    border-right: 1px #6A6A6A solid; 
    padding: 30px 6px 7px 6px; 
}

來源

2012-01-05 23:05:06 Yule

這是跳下來，因爲你已經定義了額外的填充和邊框rb增加了容器的整體寬度，使其不再是28.5％。試試這個：

#lb { 
width: 70%; 
display: table-cell; 
... 
} 
#rb { 
    width: 20%; 
    display: table-cell; 
    padding: 30px 6px 7px 6px; 
    border-left: 1px #6A6A6A solid; 
    border-right: 1px #6A6A6A solid; 
    oveflow:hidden; 
}

更新：如果它更改爲上述CSS是不夠的，嘗試添加一個浮動：左上面兩個IDS。

來源

2012-01-05 22:57:06 evasilchenko

在寬度爲％的元素中使用填充時，填充將添加到寬度值。嘗試減小一點寬度以獲得正確的比例。

來源

2012-01-05 22:59:41 Karlisson

使用此