Question

遇到一些CSS问题，并希望有人可以帮助我。我正在尝试将#aside放在#landing的右边但是他们不共享同一个父级。不幸的是我不能改变div的结构（否则我会把#aside放在#container中并且它都是固定的），所以寻找另一个解决方案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> 
    <title>Test Layout</title> 
    <link rel="stylesheet" type="text/css" href="temp.css" /> 
</head>
<body>
    <div id="main">
        Main
        <div id="container">
            Container
            <div id="content">
                Content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <div id="landing">
                Landing
                </div>
            </div>
        </div>
        <div id="aside">
            Aside
        </div>
    </div>
</body> 
</html>

CSS：

#main {
    height: auto;
    width: 988px;
    background-color: aqua;
}

#container {
    height: auto;
    width: 988px;
    background-color: blue;
}

#content {
    height: auto;
    width: 988px;
    background-color: fuchsia;
    float: left;
}

#landing {
height: auto;
width: 632px;
padding-right: 20px;
background-color: green;
float: left;
}

#aside {
    height: auto;
    width: 316px;
    border-left: 1px solid black;
    background-color: maroon;
    float: right;
}

Answer 1

（这更像是评论而不是答案，但插入作为评论有点太长了。）

最简单的方法是使用JavaScript，特别是jQuery提供了应用的机会：

$(document).ready(
  function(){
    $('#aside').insertAfter('#landing');
  });

如果你必须只使用CSS，那么正如@Jere所说，你使用了负边距。

Answer 2

我会使用margin-top轻推它：

#aside {
    height: auto;
    width: 316px;
    border-left: 1px solid black;
    background-color: maroon;
    float: right;
    margin-top:-20px
}

请参阅：http://jsfiddle.net/RHUPm/

CSS将div放在另一个（非父级）div的区域内

2 个答案:

（这更像是评论而不是答案，但插入作为评论有点太长了。）