Div Container的位置

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解决方案，现在应该可以使用。