Firefox CSS：给定 2 个 div，如何使用静态定位将第二个浮动到右侧？

发布于 2024-07-09 05:30:05 字数 1605 浏览 6 评论 0原文

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

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

转换为CSS，问题是：给定div“main”，“rightnav”和“footer”，按照文档中的固定顺序，如何使rightnav div向右浮动，而页脚在其下方？我能做的最好的事情就是绝对定位“rightnav”（右：0），但随后页脚位于“主”div下方，而不是它们两个下方。我看过已经使用CSS重新排序DIV。负“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 流体。

感谢您的任何想法。

原文

I'm working on a Youtube userstyle script that displays comments side by side with the video so you can watch the video and read the comments at the same time (what a marvelous idea - duh). You can see in the screenshots how far I've got. That means I only care about Firefox, and that CSS3 goes.

The problem I have is that I want to make a fully fluid layout and have the "other videos" div float to the right, while the middle div (the comments) stretches to fill the remaining space between the left div (the video played) and the right div (the "other videos").

Translated to CSS, the problem is: given divs "main", "rightnav" and "footer", in this fixed order in the document, how can I make the rightnav div float to the right, and the footer BELOW it? The best I managed to do was to absolutely position "rightnav" (right: 0), but then the footer goes below the "main" div, not below both of them. I've looked at Use CSS to reorder DIVs already. Negative 'top' values are out, as they depend on the content of the 'main' div.

Here's the source code:

<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>

Hopefully it's clear what I want to achieve: the "footer" below the two divs, and the "main" div fluid.

Thanks for any ideas.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

随心而道 2024-07-16 05:30:05

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

这样就可以了

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

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

that'll do it

edit: if you say liquid that usually means percent based dimensions, start associating things like that in your head

回复收藏 0 原文

鹿港小镇 2024-07-16 05:30:05

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

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

回复收藏 0 原文

小梨窩很甜 2024-07-16 05:30:05

这可能会或可能不会解决您的问题，按百分比大小的 3 列使用浮动，包含垂直的 div 大小以适应 3 个面板中最高的面板，浮动必须在中间面板之前首先内联出现，IE 对此很有趣，认为这种布局很自然inline，可以看出IE hack的风格。

这适用于很多东西，其他中心边距元素可能会出现（#mid_con）并且会堆叠，唯一的问题是如果左右面板高度比第一个中间面板短，第二个中间面板将占据整个#tub_con的宽度因为 100% 出现在第一个中间 div 的正下方。这可以通过给 (#mid_con) 提供一个静态宽度来解决，然后无论 IE 是在浮动后将其在剩余空间中居中还是将其居中到全宽度，它都会始终居中并保持相同的大小。如果不需要静态宽度 IE hack，那就玩吧，玩得开心。似乎浮动并没有完全从 IE 中的正常流程中删除 div，似乎它只是推动后续元素出现并符合两个浮动的左侧和右侧，

    <!--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>

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>

回复收藏 0 原文

~没有更多了~