代码之家 › 专栏 › 技术社区 › Dan Dascalescu

firefox css:给定两个div,如何使用静态定位将second浮动到右边?

css-float order html firefox css

2

Dan Dascalescu · 技术社区 · 17 年前

我在做一个 Youtube userstyle script 它将评论与视频并排显示,这样你就可以同时观看视频和阅读评论(真是一个了不起的主意-duh)。你可以在截图中看到我有多远。这意味着我只关心firefox,而css3也不例外。

我的问题是,我想做一个完全流畅的布局,让“其他视频”div浮动到右侧,而中间div(评论)拉伸,以填补左侧div(播放的视频)和右侧div(其他视频)之间的剩余空间。

翻译成css,问题是:给定div“main”、“rightnav”和“footer”,按照文档中的这个固定顺序,如何使rightnav div浮动到右边,以及它下面的footer?我所能做的最好的事情就是绝对定位“rightnav”(右:0),但是页脚会在“main”div的下面,而不是在两者的下面。我已经看过了 Use CSS to reorder DIVs 已经。负的“top”值不存在,因为它们取决于“main”div的内容。

这是源代码:

<html lang="en-US">
<head>
<style type="text/css">

#main {
   border: 1px solid;
   float: left;
   margin-right: 410px;
}

#rightnav {
   background-color: yellow;
   opacity: 0.5;
   border: 1px dotted;
   width: 400px;
   float: right;
   position: absolute;
   right: 0;
}

#footer {
   clear: both;
}   

</style>
</head>
<body>

<div id="baseDiv" style="width: 100%">
  <div id="main">
  <script>for (var i=1; i<100; i++) document.write('main ');</script>
  </div>

  <div id="rightnav">
  <script>for (var i=1; i<200; i++) document.write('rightnav ');</script>
  </div>

  <div id="footer">
  <script>for (var i=1; i<100; i++) document.write('footer ');</script>
  </div>

</div>

</body>
</html>

希望它清楚我想要实现什么:两个div下面的“footer”,和“main”div流体。

谢谢你的意见。

3 回复 | 直到 9 年前

1

2

annakata 17 年前

#main {
   border: 1px solid;
   width: 50%;
   float: left;
}

#rightnav {
   background-color: yellow;
   opacity: 0.5;
   border: 1px dotted;
   width: 48%;
   float: right;
}

#footer {
   clear: both;
}

那就行了

编辑:如果你说液体通常是指基于百分比的维度,那么就开始在你的头脑中联想到类似的东西

2

1

Ola Tuvesson 17 年前

您不需要位置:绝对;在您的右手div上,也不需要右侧:0;位置。将div向右浮动到另一个向左浮动的div旁边(并按您的设置边距),它们应该在浏览器窗口的任一侧结束,左手div将展开以填充可用空间(除了您的边距创建的10px间隙)。当您“绝对”定位一个对象时,您实际上是在将其从文档的正常流中移除,并且它将不再占用任何空间(也不会“推动”其他对象)。我怀疑,简单地从右侧div删除定位,同时保持清晰:both;on the footer将修复您的问题。您可能还需要在源代码中交换左侧div和右侧div的顺序,以便float:right;item位于float:left;item之前。祝你好运!

你不能在YouTube上同时观看视频和阅读评论,这也一直让我很恼火!

3

1

Shawn 16 年前

这也许能解决你的问题,3列按百分比大小使用浮点数,包含垂直的div大小以容纳3个面板中最高的,浮点数必须在中间面板之前出现在第一行,即与此有趣,认为这个布局是自然的内联,即hack可以看到的风格。

这对很多东西都有好处,其他中心边缘元素可能会出现(mid_con)并且会堆叠,唯一的问题是,如果左面板和右面板的高度比第一个中间面板短,第二个中间面板将占据整个浴缸的宽度,因为100%直接堆叠在F下面第一个中间部分。这可以通过给(中间部分)一个静态宽度来固定,然后它将始终居中并保持相同的大小,无论IE是在浮动后将其置于剩余空间的中心还是将其居中至全宽。如果给一个静态宽度IE黑客不需要,玩它和乐趣。似乎float并没有完全从ie的正常流中移除div,似乎它只是推动进行中的元素出现并符合这两个float的左右方向,

    <!--BEGIN HEADER-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 <title>float3col demo</title>

 <style>
  #tub_con{
  display:block;
  position:relative;
  text-align:center;
  width:500px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  border: solid #000000;
  }

  #left_nav{
  display:block;
  position:relative;
  float:left;
  height:80px;
  width:30%;

  max-width:30%;
  border: solid #000000;
  }
  #right_nav{
  display:block;
  position:relative;
  float:right;
  height:80px;
  width:30%;
  border: solid #000000;
  }
  #mid_cont{
  display:block;
  position:relative;
  padding-top:5px;
  margin-left:auto;
  margin-right:auto;
  height:auto;
  width:35%;
  border: solid #f86fff;
  }
  *html #mid_cont{
  display:block;
  position:relative;
  padding-top:5px;
  margin-left:auto;
  margin-right:auto;
  height:auto;
  width:100%;
  border: solid #f86fff;
  }

 </style>
</head>

<body style="text-align:center;">
<div id="tub_con">
<div id="left_nav"></div>
<div id="right_nav">
</div>
<div id="mid_cont">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x 
</div>

<!--Test the stacking problem
      <div id="mid_cont">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x 
</div>-->

<div style="clear:both;"></div>
</div>

<p style="width:100px; border:solid #000000; margin-left:auto; margin-right:auto;">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
</p>
</body>

firefox css:给定两个div,如何使用静态定位将*second*浮动到右边?

firefox css:给定两个div,如何使用静态定位将second浮动到右边?