將div對齊其他兩個分組的div

Question

如何獲取像圖片一樣對齊的黃色框？我嘗試了一些表格單元的東西，但它有點摧毀了一切。我也玩了一些浮動條件，但結果也是可怕的。你可以幫我嗎？

這裏是我的代碼： HTML

<div class="job_board"> 

    <div class="job_box"> 

    <span class="job_title_working_field"> <!-- Just made that span for grouping but it's unnecessary. --> 
     <div class="job_title"><h1>Product Development <span class="light">(m/w)</span></h1></div> 
     <div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div> 
    </span> 

     <div class="slide_button"></div> 

    </div> 

</div> 

CSS

.light { 
    font-weight: normal; 
} 

.job_box { 
    width: 100%; 
    padding: 30px 50px; 
    background-color: #082730; 
    color: white; 
    text-align: center; 
    display: table; 
} 

.working_field { 
    font-weight: bold; 
    margin: 0; 
    font-size: 0.8em; 
} 

span.job_title_working_field { 
    table-cell; 
} 

.slide_button { 
    position: absolute; 
    width: 50px; 
    height: 100%; 
    background: yellow; 
    display: table-cell; 
} 

JSFiddle

Answer 1

由於.slide_button是一個元素中，您只需將相對定位的父元素：

.job_box { 
    position: relative; 
    width: 100%; 
    padding: 30px 50px; 
    background-color: #082730; 
    color: white; 
    text-align: center; 
    display: table; 
    font-family: "Helvetica", sans-serif; 
} 

再按黃色.slide_button元素頂部/右絕對位置 - 相對於父。

UPDATED EXAMPLE HERE

.slide_button { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 50px; 
    height: 100%; 
    background: yellow; 
} 

如果你看一下上面的例子中，你會發現，水平滾動條是存在的。如果要刪除此元素，請使用box-sizing:border-box以在.job_box元素的尺寸計算中包含填充。

UPDATED EXAMPLE HERE

.job_box { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
} 

另外值得一提的是，我刪除默認8px緣body元素.. body{margin:0}

Answer 2

對我改變了標記順序一點，並更新了CSS

你正在組合太多款式：table-cell + absolute + float不好混

http://jsfiddle.net/pixelass/3Qqz4/2/

HTML：

<div class="job_board"> 
    <div class="job_box"> 
     <div class="slide_button"></div> 
     <div class="job_title_working_field"> 
      <div class="job_title"> 
       <h1>Product Development <span class="light">(m/w)</span></h1> 
      </div> 
      <div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div> 
     </div> 
    </div> 
</div> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
.light { 
    font-weight: normal; 
} 
.job_box { 
    width: 100%; 
    background-color: #082730; 
    color: white; 
    text-align: center; 
    display: block; 
    font-family:"Helvetica", sans-serif; 
    position: relative; 
    height: 120px; 
    vertical-align: top; 
} 
.job_title h1 { 
    margin: 0; 
} 
.working_field { 
    font-weight: bold; 
    margin: 0; 
    font-size: 0.8em; 
} 
.job_title_working_field { 
    padding: 30px 50px; 
} 
.slide_button { 
    width: 50px; 
    height: 100%; 
    background: yellow; 
    float: right; 
}