将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; 
}