问题标签 [css-float]

我有一些关于基本 CSS 的问题，我无法理解或找到答案。

首先，我尝试在另一个 div 标签中放置 3 个 div 标签。包含其他 3 个标签的第一个主 div 标签除了大小（400px由400px. 里面的其他 3 个 div 都是20pxby 20px，其中 1 个是assigned float:left，另外两个被分配了一个向右浮动的样式。所有属性都在一个样式中定义，并且float:right分配了相同样式的两个 div。我的问题是，在代码中最后出现的 2 个 div 中，会首先出现在浏览器中，我不明白其中的原因。

这是代码：

我正在开发一个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 的内容。

这是源代码：

希望很清楚我想要实现的目标：两个 div 下方的“页脚”和“主”div 流体。

感谢您的任何想法。

我想在页面顶部向右浮动一个 div。它包含一个 50px 的方形图像，但目前它会影响页面顶部 50px 的布局。

目前其：

我尝试了 z-index，因为我认为这就是答案，但我无法让它继续下去。

我知道我错过了一些简单的事情，但我似乎无法确定它。

float:right我多次使用（或left）在容器顶部浮动图像和插入框。现在，我需要使用您使用的普通文本换行将 a 浮动div到另一个的右下角（仅在上方和左侧换行的文本）。divfloat

我认为这一定是相对容易的，即使float没有任何bottom价值，但我无法使用多种技术来做到这一点，并且除了使用绝对定位之外，在网络上搜索没有提出任何其他方法，但这并没有给出正确的自动换行行为。

我曾认为这将是一个非常常见的设计，但显然不是。如果没有人有建议，我将不得不将我的文本分成单独的框并div手动对齐，但这是相当不稳定的，我不想在需要它的每个页面上都这样做。

我正在尝试在网页上创建一个“工作流程”栏。

工作流程中的项目可能具有不同的长度。

可能有足够的项目来填充屏幕的宽度，因此流程需要换行到下一行。

我正在使用左浮动 div 来执行此操作。

但是，我希望 div 采用适当的屏幕宽度。

如果只有三个项目可以放在一条线上，那么我希望这些项目能够均匀地放在线上，同时考虑到每个项目的宽度。

目前我所能得到的只是一行上的最后一个 div 来填充剩余空间，这通常意味着我的项目都是左对齐的，例如我可以得到这样的布局：

但我实际上希望它看起来像这样：

如果你明白我的意思。

我是否需要为此使用表格而不是浮动 div？

我不断发现，如果我在彼此内部嵌套了 div，并且内部的一个是浮动的，那么外部的就不会围绕它展开。

例子：

我需要对外部 div 做什么以使其覆盖内部 div？IE：把它的边框/背景颜色一直放在它周围？

另外，我在这里遇到的一般原则是什么？如果是这样，我应该查什么才能深入了解它是什么？

谢谢！

编辑

大家好，

感谢您的回答，语义上正确和否，以及链接。

尽管我最终会在最后的工作中使用溢出，但我会保留 Ant P 的答案，因为它是第一个真正有效的答案，并且让我摆脱了短期的卡顿，即使它冒犯了语义敏感性。

作为一个长期尝试转向体面的 css 布局的 html hack，我当然可以理解并同情使用语义不正确的 hack 来完成工作，尽管我相信他会在此之后改变这种习惯 =o)

我有以下 HTML

文本不会在图像周围浮动。不管是浏览器IE还是Firefox。

如何解决此问题以在图像周围浮动？

在http://tesselaar.com/gallery/页面上，我在“照片库”页面顶部有一个标题（1 级），它在 IE7 中不显示，我不知道为什么。

它遵循与网站其余部分相同的 CSS 和页面结构，唯一的区别是元素在之后立即浮动到右侧。

任何见解将不胜感激。

我有一个名为 NAV 的 div，在 NAV 内部我有一个 5 li 的 UL，我向左浮动，即 li 是，但当我这样做时，NAV 会崩溃。我知道这一点，因为我在 NAV 周围设置了一个边界，以查看它是否崩溃并且确实如此。这是示例。

折叠 http://img401.imageshack.us/img401/8867/collapsedze4.png

没有折叠 http://img71.imageshack.us/img71/879/nocollapsedkx7.png

正如您在第一张图片中看到的那样，NAV div 中的链接向左浮动，顶部的黑色边框是称为 NAV 的实际 div。

在这张图片中，您可以看到它如何具有顶部和底部边框并且它没有折叠。

这是我使用的一些html和css。

替代文字 http://img301.imageshack.us/img301/5514/codejc8.png

假设我有文本框、下拉列表和提交按钮。它们都是内联元素。这意味着应该忽略“正式”的边距、填充、宽度和高度属性（实际上并非如此）。如果我要以正确的方式将高度设置为按钮，我会编写类似 display:block 的内容，然后定义高度。但是考虑到块级元素会意外扩展自身，所以我最好将其宽度设置为某个固定值。问题是我不知道它的宽度，因为它可以在按钮的文本上动态定义。

另一种情况：我希望通过<ul>和创建一个菜单<li>。我想让它水平对齐，一些项目向左分组，一些向右拉伸。<ul>和都是<li>块级元素。因为我希望我的菜单占据所有可用的水平空间，然后使用项目高度并将菜单项推到两侧，所以块模式对我来说很好。我将使用 float:left 和 float:right 来完成任务。但是再次使用应该为菜单元素设置宽度，因为它们是块元素。我不知道它们的宽度，因为项目的文本可能会有所不同。但似乎一切都被渲染得很好。

我没有注意到两个内联元素都被强制渲染为块元素而不被浮动或宽度设置，或者列表项示例有任何问题。无论当前版本是什么，它都可以在 IE7、FF3、Opera 9 和 Safari 中正常工作。问题仍然存在：我是否应该担心这些 inline-to-block 元素或真正的块元素浮动但没有设置宽度，或者只是让所有内容保持原样？我是否遗漏了某些东西，或者它只是您根本不应该期望得到正确的那些东西之一？