2

我正在开发一个Youtube 用户样式脚本，它与视频并排显示评论，这样您就可以同时观看视频和阅读评论（多么奇妙的想法 - 呃）。你可以在截图中看到我已经走了多远。这意味着我只关心 Firefox，而 CSS3 也一样。

我遇到的问题是我想制作一个完全流畅的布局并让“其他视频”div 向右浮动，而中间 div（评论）伸展以填充左侧 div（播放的视频）之间的剩余空间和正确的 div（“其他视频”）。

翻译成CSS，问题是：给定div“main”、“rightnav”和“footer”，在文档中这个固定的顺序，我怎样才能让rightnav div向右浮动，而footer在它下面呢？我设法做的最好的事情是绝对定位“rightnav”（右：0），但是页脚位于“主”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 下方的“页脚”和“主”div 流体。

感谢您的任何想法。

4

3 回答 3

2 
#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;
}

这样就行了

编辑：如果您说液体通常意味着基于百分比的尺寸，请开始在您的脑海中关联类似的东西

于 2008-11-18T11:51:48.653 回答
1

This may or may not solve your problem, 3 column sized by percents uses floats, containing div sizes verticly to accomadate the tallest of the 3 panels, floats must appear first inline before middle panel, IE works funny with this, thinks this layout is naturaly inline, IE hack can be seen in style.

This works good for lots of stuff, other center margined elements may appear (#mid_con) and will stack, only problem is if left and right panel heights are shorter than first middle panel the second middle panel will take up the whole #tub_con in width cuz is 100% appearing stacked directly under first middle div. This can be fixed by giving a static width to (#mid_con), it will then always center and stay same size no matter if IE is centering it in the remaining space after floats or centers it to full width. if given a static width IE hack not needed, play with it and have fun. Appears that float does not remove a div completely from normal flow in IE, seems it just pushes proceeding elements to appear and conform to the left and right of the two floats,

    <!--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>
于 2010-01-11T00:44:14.613 回答
1

你不应该需要 position: absolute; 在你右手的 div 上，也不在右边：0；定位。将 div 浮动到另一个向左浮动的 div 旁边（并且设置了边距），它们应该最终位于浏览器窗口的任一侧，左侧 div 扩展以填充可用空间（除了由创建的 10px 间隙你的保证金）。当您“绝对”定位一个对象时，您实际上是将其从文档的正常流程中移除，并且它将不再占用任何空间（也不会“推动”其他对象）。我怀疑在保持清晰的同时简单地从右手 div 中删除定位：两者；在页脚将解决您的问题。您可能还需要在源代码中交换左右手 div 的顺序，以便 float: right; 项目在浮动之前：左；物品。

PS 一直让我很恼火的是，你不能在 YouTube 上同时观看视频和阅读评论！

于 2008-11-18T11:35:26.360 回答