Question

＆＃13;

<header>
  <div>
    <h1>Title</h1>
  </div>
  <div id="nav">
    <nav>
      <ul>
        <li>foo</li>
      </ul>
    </nav>
  </div>
</header>
<div id="main">
  content!
</div>

＆＃13;

我有以下页面布局，其中标题div在窗口顶部呈现，然后div#nav在其下方呈现，div#main在下面呈现：< / p>

<body>
    <header>
        <div>
            <h1>Title</h1>
        </div>
        <div id="nav">
            <nav>
                <ul>
                    <li>foo</li>
                </ul>
            </nav>
        </div>
    </header>
    <div id="main">
        content!
    </div>
</body>

是否可以仅使用CSS而不更改DOM ，将div#nav（或其子导航元素）定位到div#main的右侧？< / p>

Answer 1

是的，你可以这样做，https://jsfiddle.net/Lddyn573/1/

header > div{width: 100%; background-color: lightblue}
header > #nav{float: right; width: 50%; background-color: lightgreen}
#main{float: right; width: 50%; background-color: lightpink}

Answer 2

您可以使用position:absolute执行此操作检查此 jsfiddle

代码：

header { 
    position:relative;
    float:left;
    width:100%;
    background:blue;
}
#nav { 
    position: absolute;
    right: 0;
    background: yellow;
    top: 100%;
    width: 50%;
}
#main {
    background: red;
    float: left;
    width: 50%;
}

仅使用css将一个元素放在非相邻元素旁边？

2 个答案: