使用 CSS，如何在两个浮动 div 之间堆叠两个跨度？
在页面顶部，我有两个 div，一个浮动到左侧，一个浮动到右侧。我可以在它们之间放置带有边框的文本，但是，我现在需要在它们之间堆叠两个这样的文本区域。
这是一个说明我的问题的小提琴： http://jsfiddle.net/TcRxp/
我需要下面的橙色框绿色框，每个中心彼此对齐。 “图例”（向右浮动）曾经处于同一水平，但现在向下移动。
我尝试添加另一张桌子，但这没有帮助。
请原谅标记 - 我知道它并不真正光滑。随着时间的推移，有一些人接触过这一点，但我们都不是这方面的专家。
是的，我已经游说一位设计师加入团队，但还没有发生。
谢谢，
保罗
At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.
Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/
I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.
I tried adding another table to the mix but that didn't help.
Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.
And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.
Thanks,
Paul
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
更新：合并@Jeremy B的建议
是否必须通过CSS更改？处理此类场景时，您需要注意 HTML 元素的定义顺序。
看看这里的修改： http://jsfiddle.net/TcRxp/8/
我能够通过更改三个 DIV 的顺序并使用 @Jeremy B 的 CSS 建议来实现您所需的效果
本质上，布局的逻辑是
UPDATE: Incorporating @Jeremy B's suggestion
Does it have to be via CSS changes? When dealing with scenarios like this, you need to be careful of the order in which the HTML elements are defined.
Look at the modification here: http://jsfiddle.net/TcRxp/8/
I was able to acheive what you needed by changing the order of the three DIVs and using the CSS suggesion from @Jeremy B
Essentially, the logic for the layout is
首先让你的顶部跨度成为一个块元素来堆叠它们：
Status:< /code>然后将中间的 div 向左浮动：
将 float:left 添加到 css 中的#headmiddle
First make your top span a block element to stack them:
<span class="color status active bold" style="display:block">Status:</span>then float the middle div left as well:
add float:left to #headmiddle in your css
当您将 CSS 和表格布局结合起来时，总是很难获得所需的结果。
我建议简化您的 HTML:
和 CSS:
结果是语义上正确的 HTML，更易于阅读，因此将来更容易修改。 支持小提琴。
It's always going to be difficult to get the desired results when you're combining CSS and tables-for-layout.
I would suggest simplifying your HTML:
and your CSS:
The result is semantically correct HTML, easier to read and therefore easier to modify in the future. Supporting fiddle.
如果您需要使用 CSS 来完成此操作，请参阅我的更改： Fiddle
我添加了以下内容：
这将导致你的跨度要“堆叠”。
If you need to do it with CSS, see my changes: Fiddle
I added the following:
This will cause your spans to "stack".
我通过整合许多不同的来源得到了它。亚历克斯·科尔斯的解决方案是最接近的，但中间并不居中。它也比我的烂摊子干净得多。我从 中的代码开始这篇文章：
（小提琴）
我采用了亚历克斯清理的元素，这让我更接近我的目标，但中心色块太宽了。从这个问题我了解了“max-width”，结束了是我需要的最后一件作品……至少我是这么想的。
编辑： max-width 在 IE7 怪异模式下不起作用（我必须支持），所以来自 此页 我学习了如何调整我的 CSS 以在 IE7 怪异模式、IE8 和 FF 下工作。
最终代码（fiddle）：
感谢所有出色的答案 - 我从这个问题中学到了很多东西。
保罗
I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:
(fiddle for above)
I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.
Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.
The final code (fiddle):
Thanks to all the great answers - I learned a lot from this question.
Paul