我的3個div沒有正確排隊。最右邊的div被未定義的保證金壓低了？

Question

我有一個包裝div的3個div。在我的包裝div中，我最左邊的div是我用來在使用js的滑塊之間導航的箭頭圖像。中間的div是滑塊，右邊的div是向右移動到下一個滑塊的右箭頭。

這裏的滑塊代碼：

<div class="twocol_double"> 
    <div class="btn_left"></div> 
    <div id="slide_wrapper"> 
     <div class="slide" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;"> 

      <h3>Heading1</h3> 

      <p>「Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in vol</p> 
     </div> 
    </div> 
    <div class="btn_right"></div> 
</div> 

將有多個slide類，但對於問題的緣故，我只加了1

出於某種原因，不過，我的右分度我的右箭頭正被推​​下。在Chromes元素檢查器中查看，在我的滑塊div上有一個50px右邊距，我沒有在任何地方定義（我看到橙色，但沒有CSS標記）。

我在jsfildde重建這裏的問題：http://jsfiddle.net/maZbF/1/

我想要的右箭頭，與其他兩個div排隊。我破壞了我的大腦，試圖弄明白這一點，然後用chrome進行調試而無濟於事。我錯過了一些簡單的東西嗎

Answer 1

我認爲你遇到的問題是你的右分區是position:relative，而左邊是position:absolute。我想你可以使用簡單的花車雖然簡化這個佈局：

HTML

<div class="twocol_double"> 
    <div class="btn_left"></div> 
    <div id="slide_wrapper"> 
     <div class="slide"> 
      <h3>Heading1</h3> 
      <p>「Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in vol</p> 
     </div> 
    </div> 
    <div class="btn_right"></div> 
</div> 

CSS

.twocol_double { 
    width: 500px; 
    float: left; 
    font-size: 1.2em; 
} 
.btn_left { 
    cursor: pointer; 
    display: block; 
    width: 20px; 
    height: 170px; 
    float: left; 
    background: #ccc url("http://i.imgur.com/7bYsZJD.gif") no-repeat center center; 
} 
#slide_wrapper { 
    width: 460px; 
    height: 131px; 
    display: block; 
    float:left; 
} 
.btn_right { 
    cursor: pointer; 
    width: 20px; 
    height: 170px; 
    float: right; 
    background: #ccc url("http://i.imgur.com/0QRkQ2M.gif") no-repeat center center; 
} 
h3 { 
    font-size: 1.5em; 
    color: #7DAC20; 
} 
p, blockquote { 
    padding-bottom: 20px; 
    font-size: 1.3em; 
    color: #636B75; 
    line-height: 20px; 
} 

http://jsfiddle.net/Eb3TA/

Answer 2

爲了液浮內容保持在同一行，所有浮動內容必須在任何正常內容之前定義。

在這種情況下，您的左鍵首先浮動到左邊，這是因爲它是第一個。那麼你有你的師沒有漂浮，是display: block。即使爲其定義寬度，塊級元素也會始終將其後的任何內容推送到下一行。所以當它到達你的右鍵後，它會從新的一行開始，然後浮到新行的右側。它從頂部開始131px，因爲你之前的部門已經定義了一個height: 131px（並且其中的其他內容只是溢出越過邊界，而不會干擾你右邊的浮動元素）。

所以，你有幾個選擇：

1. 左鍵後立即定義你的右鍵。

2. 浮法所有三個元件向左所以它們堆疊在彼此的頂部上。