我希望以下示例中的两个span标签彼此相邻显示，而不是在另一个下方显示。如果我将width类的span.right 设置为 49%，它们会彼此相邻显示。我无法弄清楚为什么右跨度被向下推，就像右跨度有一些不可见padding/margin的东西，这使得它占用了 50% 以上。我试图在不使用 html 表的情况下完成这项工作。有任何想法吗？

感谢您的解释。该float:left作品在 FF 3.1 中与预期结果完美结合。不幸的是，在 IE6 中，右侧跨度渲染了 50% 的 50%，实际上它的宽度为浏览器窗口的 25%。将其宽度设置为 100% 可以达到预期的效果，但会在处于标准合规模式的 FF 3.1 中中断，我理解这一点。让它同时在 FF 和 IE 6 中工作，而无需求助于 hack 或使用多个 CSS 表一直是一个挑战

我有一个网站我制作得非常快，它使用浮动来显示不同的内容部分。浮动内容和具有额外边距的内容在 FF/IE 中都显示得很好，但在 safari 中，其中一个 div 完全隐藏。我尝试切换到paddingand position:relative，但对我没有任何效果。如果我取出代码以将其显示在右侧，它会再次显示但在浮动内容下方。

似乎导致问题的css的主要部分是：

无论我是否为#settings div 指定大小，这都会给我相同的结果。任何想法，将不胜感激。

该站点位于：http: //frickinsweet.com/tools/Theme.mvc.aspx以查看源代码。

我有一个<div>每个都有两个 s的列表，<li>我想将它们一个并排浮动，我希望<li>占据整个可用空间。我该怎么做？

我想创建一个带有标题栏的简单框，其中包含标题和一些工具按钮。我有以下标记：

这在 Firefox 和 Chrome 中表现良好：

http://www.boplicity.nl/images/firefox.jpg

然而 IE7 完全搞砸了，把右边的浮动元素放在页面的右边：

http://www.boplicity.nl/images/ie7.jpg

这可以解决吗？

我正在一起粗略布局并进行一些浏览器测试。以前从未遇到过此问题，请查看本页页脚中的联系表

http://staging.terrilynn.com/fundraising/

有一个宽度为 298px 的 div 向右浮动，在源顺序中排在第一位。紧随其后的是其他几个 div，每个 div 的子表单元素都向左浮动。

应该出现在右侧浮动消息 div 左侧的 div 正在消失。

页面在 Firefox 中正确显示。任何帮助，将不胜感激。

尽管像<div>s 这样的元素通常会增长以适应其内容，但使用该float属性可能会给 CSS 新手带来一个令人吃惊的问题：如果浮动元素有非浮动的父元素，则父元素会崩溃。

例如：

此示例中的父 div不会扩展以包含其浮动子级 - 它似乎具有height: 0.

你怎么解决这个问题？

我想在这里创建一个详尽的解决方案列表。如果您知道跨浏览器兼容性问题，请指出。

解决方案 1

浮动父级。

优点：语义代码。
缺点：您可能并不总是希望父级浮动。即使你这样做了，你会浮动父母的父母，等等吗？你必须浮动每个祖先元素吗？

解决方案 2

给父母一个明确的高度。

优点：语义代码。
缺点：不灵活 - 如果内容更改或浏览器调整大小，布局将中断。

解决方案 3

在父元素内附加一个“spacer”元素，如下所示：

优点：代码简单。
缺点：不是语义；间隔 div 仅作为布局技巧存在。

解决方案 4

将父级设置为overflow: auto。

优点：不需要额外的 div。
缺点：似乎是一种黑客行为 - 这不是该overflow物业的既定目的。

注释？其他建议？

http://biochrom.fivesite.co.uk/catalogue4.asp

在上面的页面上，有一个图像漂浮在左边。它的右侧是一个列表，标题为“功能”。列表项有一个背景图像，但是，它没有出现。清单 2 显示了背景图像的外观。

有谁知道我怎样才能使子弹可见？

我更像是一名程序员而不是设计师，我试图接受<div>s 而不是使用表格，但我陷入了困境。

这就是我想要做的。我正在设置一个调查页面。我希望每个问题的文本都位于蓝色 div 的顶部，如果太长则换行。我希望所有的红色 div 都排在容器 div 的右上角。

布局 http://img528.imageshack.us/img528/4330/divsforsurveyop2.jpg

这是我开始的，只要框架宽度超过 420 像素，它就可以正常工作。然后红色的 div 跳到下一行。我想我可能走错了，也许我应该向右浮动？

我想在同一行上有两个项目，float: left用于左侧的项目。

我独自实现这一点没有问题。问题是，即使您将浏览器的大小调整得很小，我也希望这两个项目保持在同一行。你知道......就像桌子一样。

目的是使右侧的项目无论如何都不会被包裹。

如何使用 CSS 告诉浏览器我宁愿拉伸包含div而不是包装它，这样float: right;div 就在float: left; div?

我想要的是：

Mark Up

CSS

Result in IE && FF
Resutls in IE & FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
The result is same with both IE 6 & 7. How can I remove the gap between the divs?

Udate
I have two divs each with 100% height. the left div is a fixed width floating div. Even after giving correct margin-left to the right div, there remains a gap (3px) between the two divs. Where as in firefox it renders correctly.

The reason I have used quirk mode is to able to get 100% height for the divs

Can this gap be eliminated? Or is there a better way to do two column 100% height layout with pure css?