html - css：如何使第三个 div 与第一个 div 对齐

Question

CSS代码：

<style>
.wrapper {
    margin: 0 auto;
    overflow: hidden;
    width: 950px;
}
#box2 a{
    color: blue;
}
</style> 

html代码：

<div class="wrapper">
    <div id="box1">
        <p>Using XCLASSes is fragile: Neither the core, nor extensions authors can guarantee that XCLASSes do not break if the underlying code changes (for example during upgrades). Be aware that your XCLASS can easily break and has to be maintained and fixed if the underlying code changes. If possible, you should use a hook instead of an XCLASS. If the given code does not provide a hook for your specific problem, you could ask the extension author or the core to implement a hook.
        </p>
    </div>
    <div id="box2">
        <p><a href="#">school</a></p>
        <p><a href="#">Job Club</a></p>
        <p><a href="#">member</a></p>
    </div>
    <div id="box3">
        <table>
            <tr>
                <td class="item-header">Career Resources</td>
            </tr>
            <tr>
                <td class="item">Workbook+ 200 online resources</td>
            </tr>
            <tr>
                <td class="item">Personal Career Management Dashboard</td>
            </tr>
            <tr>
                <td class="item">Job Searching and Resume Posting</td>
            </tr>
        </table>
    </div>
</div>

问题：

现在它显示如下：

box1
box2
box3

如果不改html代码，只改css代码，有没有可能让它显示成这样？

box1  box3
box2

我的意思是box3与 排队box1，这可能吗？

Answer 1

见这个小提琴。你需要带包装position的盒子 3absolute

CSS

.wrapper {
    margin: 0 auto;
    overflow: hidden;
    width: 950px;
    position: relative;
}
#box2 a{
    color: blue;
}
#box1, #box2, #box3 {
    width: 450px;

}
#box1, #box2 {
    margin-right: 50px;
    float: left;
}
#box3 {
    position: absolute;
    right: 0;
}

Answer 2

一个虽然粗糙的解决方案：

将 div #box2 和 #box3 以相反的顺序排列。

参见jsFiddle 演示

.wrapper{
    border: 1px solid #888;height:600px;width:300px;
}

#box3 {
    border: 1px solid #888;background-color:#CCC;width:300px;float:left;
}

#box2 {
    border: 1px solid #888;background-color:#CCC;width:800px;height:130px;float:left;
}

#box1 {
    background-color:#CCC;width:300px;min-height:100px;float:left;border: 1px solid #888;
}