Css 将div与另外两个分组div'；s

我怎样才能让那个黄色的盒子像图片上那样对齐？我试过一些桌子上的电池，但它破坏了一切。我也打了一些浮动状态，但是结果也很糟糕。你能帮我吗

这是我的密码： 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>

---

由于

.slide\u按钮

位于一个元素内，您只需相对定位父元素：

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

然后绝对定位黄色的

。滑动按钮
元素在顶部/右侧-相对于父元素


如果查看上面的示例，您会注意到存在一个水平滚动条。如果要删除此项，请使用以便在
.job\u框
元素的尺寸计算中包含填充


还值得注意的是，我删除了
body
元素上的默认
8px
边距<代码>正文{margin:0}
我稍微更改了标记顺序并更新了css

您组合的样式太多：
表格单元格
+
绝对
+
浮动
混合不好


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>

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

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

<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>

* {
    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;
}