定位DIVS推到最左边的部分

时间:2017-11-07 03:57:02

标签: html css

我对CSS定位感到困惑。我有一份工作发布,我希望它看起来像这样。

PHP Developer      |        Company Logo
------------------------------------------
Job Desciption:

lorem ipsum etc etc etc

Salary: P10000
------------------------------------------

我想在不使用浮动的情况下将公司徽标推向右侧。

这是我的标记和我的CSS:

.job-post-title,
.job-post-company {
  display: inline-block;
}

.job-post-header {
  position: relative;
}

.job-post-title {
  position: absolute;
  right: 0;
}

.job-post-title {
  position: absolute;
  left: 0;
}
<div class="job-post">
  <div class="job-post-header">
    <div class="job-post-title">[title]</div>
    <div class="job-post-company">[picture]</div>
  </div>
  <div class="job-post-body">
    <div class="job-post-description">[body]</div>
    <div class="job-post-salary">[field_salary]</div>
    <div class="job-post-flag">[ops]</div>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

更新你的css就像这样

.job-post-title,
.job-post-company {
  display: inline-block;
}

.job-post-header, .job-post-body{
  position: relative;
  float:left;
  width:100%;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px dashed #000;
}

.job-post-company {
  position: absolute;
  right: 0;
}

.job-post-title {
  float:left;
  width:50%;
  border-right:1px dashed #000;
}