Question

如何让黄色方框像图片一样对齐？我尝试了一些表格细胞，但有点破坏了一切。我也玩过浮动条件，但结果也很可怕。你能救我吗？

Sketch of wanted result.

这是我的代码：的 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;
}

将div与另外两个分组的div对齐

2 个答案: