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


我的意思是使box3box1对齐,这可能吗?

最佳答案

请参见This Fiddle。您需要使用包装器position框3 absolute

的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;
}

10-08 11:46
查看更多