我对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>
答案 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;
}