html - Div容器的位置

Question

我有以下 HTML 代码:

<div class="item">
    <div class="pageheader">
        Header
    </div>
    <div class="info">
        Created on...
    </div>
    <div class="image">
        Image
    </div>
    <div class="more">
        Read More...
    </div>
</div>

我不能改变元素的顺序并且想在没有绝对位置的情况下以这种方式定位它:

有没有办法做到这一点？

Answer 1

编辑:

.item{

    width: 400px;
    height:  100px;
    border: 2px solid black;
    position: relative;
}

.image{

    float: left;
    border-right: 2px solid black;
    height: 100px;
    width: 100px;

}

.pageheader{

    float: right;
    border-bottom: 3px solid black;
    height: 30px;
    width: 298px;
    top: 33px;
    left:102px;
    position: absolute;
}

.info{

    float: right;
    border-bottom: 3px solid black;
    height: 30px;
    width: 298px;
    top: 0px;
    left:102px;
    position: absolute;
}

.more{

    float: right;
    height: 30px;
    width: 298px;
    top: 66px;
    left:103px;
    position: absolute;
}

CSS 解决方案，现在应该可以工作了。