将 DIV 定位在前一个 DIV 之前

平面设计 页面布局 css html
2022-02-28 03:19:07

当涉及到 HTML/CSS 时,我并不精通。

我在我的博客中使用 Typepad,这对我有很大的限制。

有四个div。

<div id="container-inner">

  <div id="nav"></div>
  <div id="pagebody">
    <div id="pagebody-inner">
      <div id="alpha"></div>
      <div id="beta"></div> 
    </div>
  </div>

</div>

我需要“beta”出现在页面的右侧,“nav”右侧和“alpha”之前。

直播网站的链接在这里:http ://sarajchipps.com/

在此处输入图像描述

非常感谢您的帮助。

4个回答

如果您的意思是,您希望侧边栏位于页面的最顶部,从导航栏的上方和右侧开始,就像这样......

在此处输入图像描述

...有两种简单的方法,另一种更困难的方法也有其他优势。

1.position: absolute;

这是最简单的方法:

  • top: 0;将,添加position: absolute;到需要位于页面顶部的元素 (#beta),并替换float: right;right: 0;(float: right;不起作用,position: absolute;right: 0;在这种情况下会产生相同的效果)
  • 拥有position: relative;一个包含整个页面的元素(在您的网站上,即#container-inner),并且中间没有元素(因此您需要从中删除它#pagebody- 尝试过它并且它不会破坏任何东西)。

元素的将基于最近的top: 0;元素position: absolute;position: relative;


2.margin-top: -XXXpx;

如果由于某种原因您确实需要position: relative;中间的 div(我看不出原因,但可能会出现一个原因),那么还有另一种不太干净的选择。

导航/标题部分的高度是固定的,因此您知道要向上移动侧边栏多少像素。因此,您可以只为侧边栏 ( #beta) 提供那么多像素的负上边距(如margin-top: -350px;)。此计划的唯一问题是,如果您更改页眉的高度,则需要调整顶部边距。


3.内容优先布局

最后,最好(但最简单)的解决方案是编辑HTML 模板并将 #nav 元素在 html 中向下移动,使其位于页面内容下方,如 #beta 侧边栏,然后,在 alpha 上放置一个大的 margin-top,创建一个与标题#nav 部分大小相同的间隙,然后制作#nav 元素和#beta 侧边栏position: absolute;top: 0;(如上检查position: relative;s),并确保#nav 的大小正好适合填充孔。

通常在 HTML 的主要内容下方有可能的非内容元素会更好——这意味着有屏幕阅读器的人会在下一步去哪里的链接列表之前听到他们想要的有趣内容,并且一些搜索引擎会给予更大的权重到标记中较早的条款(我很确定这仍然是正确的)。

如需更多阅读,这里有一篇关于内容优先布局的简单文章,这里有一个适用于移动和桌面的“响应式”设计的示例

绝对定位将为您完成。
尝试在Webmasters SE上寻求更全面的帮助。

您可以实现一些 CSS(基于您的代码)-我不能 100% 确定您尝试实现的目标(这里已经很晚了,所以我现在要责怪时钟:))-我不熟悉打字板,但总的来说——

也许这可以让你走上正轨:

#pagebody-inner {
    display:block;
    width:100%; /* or the size you need it to be in relation to nav */
}
/* This will float your div-elements inside pagebody-inner to the right hand side */
#pagebody-inner div {
    display:block;
    float:right;
}

这些 css 行当然需要放入您网站的 css 文件中。

如果您想使用它,我会将代码放在此站点上-根据需要进行修改:http:
//jsfiddle.net/SE4Pr/

可以使用绝对定位(但请记住相对定位父pagebody-inner对象,除非您完全无视元素流)。

或者,您可以同时浮动alphabeta向右浮动。或者您可以交换 and 的位置alphabeta向左浮动或使它们成为内联块。