2011-06-08 76 views
0

在页面的顶部,我有两个div,一个浮动到左侧,另一个浮到右侧。我可以在文本之间放置边框,但是现在我需要在它们之间堆叠两个这样的文本区域。使用CSS,如何在两个浮动div之间堆叠两个跨度?

这里是说明我的问题一个小提琴:http://jsfiddle.net/TcRxp/

我需要的橙色框下的绿色方块,与其他对准每个中心。 “传奇”(漂浮在右边)曾经处于同一水平,但现在已经向下移动。

我试着添加另一张表,但没有帮助。

打扰标记 - 这不是真正的光滑,我知道。有一些人随着时间的推移触及了这一点,我们都不是这个领域的专家。

是的,我已经游说设计师加入到团队中,但还没有发生。

感谢,

保罗

回答

0

我把它放在一起,许多不同的来源。亚历克斯科尔斯的解决方案离蝙蝠最近,但中间并没有居中。它比我的烂摊子还要干净得多。我开始与代码this post

<style type="text/css"> 
.leftit { 
    float: left; 
} 
.rightit { 
    float: right; 
} 
.centerit { 
    width: 30%; 
    margin-right: auto; 
    margin-left: auto; 
    text-align: center; 
} 
.centerpage { 
    width: 80%; 
    margin-right: auto; 
    margin-left: auto; 
} 
</style> 
</head> 
<body> 
<div class="centerpage"> 
<div class="leftit">Hello Left</div> 
<div class="rightit">Hello Right</div> 
<div class="centerit">Hello Middle</div> 
</div> 

fiddle for above

我把亚历克斯清理的元素就是让我更接近我的目标,但该中心色块是太宽。从this question我了解到“最大宽度”,最终成为我需要的最后一部分......所以我想。

编辑:最大宽度不能在IE7怪癖模式下工作(我必须支持)所以从this page我学会了如何调整我的CSS以在IE7 quirks模式,IE8和FF中工作。

最后的代码(fiddle):

.leftit { 
    float: left; 
    font-size: 0.8em; 
} 
.rightit { 
    float: right; 
    font-size: 0.8em; 
} 
.centerit { 
    width:220px; 
    margin-right: auto; 
    margin-left: auto; 
    font-size: 0.8em; 
} 
#headmiddle div { 
    border: 1px solid #000; 
    margin-bottom: 3px; 
} 
.centerpage { 
    margin-right: auto; 
    margin-left: auto; 
    text-align: center; 
} 

strong { font-weight: bold; } 

.search { background: orange; } 
.active { background: #8ed200; } 

dt { float: left; font-weight: bold; } 
dd { margin-left: 4.5em; } 

<div class="centerpage"> 
    <div class="leftit">a little search form here</div> 
    <div class="rightit"> 
     <dl> 
      <dt>Legend:</dt> 
      <dd>Status numero uno</dd> 
      <dd>Status two</dd> 
     </dl> 
    </div> 
    <div class="centerit" id="headmiddle"> 
     <div class="active"><strong>Status:</strong> 
      Active</div> 
     <div class="search">Search results displayed</div> 
    </div> 
</div> 

感谢所有伟大的答案 - 我从这个问题中学到了很多。

Paul

1

UPDATE:结合@Jeremy B的建议

是否必须通过CSS的变化?在处理这种情况时,您需要小心HTML元素的定义顺序。

看看这里的修改:http://jsfiddle.net/TcRxp/8/

我能够acheive你需要什么样的改变三个的DIV的顺序,并使用CSS suggesion从@Jeremy乙

本质上,逻辑为布局是

  1. 画出浮子右内容
  2. 画出浮子左侧用内容
  3. 绘图吨他的内容在中间(因为它现在将渲染到浮动内容的右侧。
+0

Ha,山寨版! +1进行我们的更改以使其正常工作。 – 2011-06-08 18:25:43

0

如果需要使用CSS来做到这一点,看看我的变化:Fiddle

我增加了以下内容:

#headmiddle span.status { display: block } 

这将导致你的跨度上,以 “堆栈”。

+0

但是现在浮动右键的内容被按下了一条线 – 2011-06-08 18:15:08

1

首先让你的顶部跨度块元素堆叠起来:

<span class="color status active bold" style="display:block">状态:</span>

则浮在中间的div左边还有:

加浮动:左中#headmiddle您css

+0

我不得不修补一些,但这非常接近。只要我保持中间设置的边距(并且不要将它们移除或更改为自动),它的工作情况会非常好。我也删除了固定的表格宽度。 http://jsfiddle.net/snyay/ – Paul 2011-06-09 14:34:05

1

当您将CSS和用于布局的表格组合在一起时,获得期望的结果始终难以实现。

我建议简化您的HTML:

<div id="headleft">a little search form here</div> 
<div id="headmiddle"> 
    <div class="active"><strong>Status:</strong> Active</div> 
    <div class="search">Search results displayed</div> 
</div> 
<div id="headright"> 
    <dl> 
     <dt>Legend:</dt> 
     <dd>Status numero uno</dd> 
     <dd>Status two</dd> 
    </dl> 
</div> 

和你的CSS:

div { padding: 2px; } 
strong { font-weight: bold; } 
#headleft { float: left; font-size: 0.8em; } 
#headmiddle { float: left; font-size: 0.8em; } 
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; } 
.search { background: orange; } 
.active { background: #8ed200; } 
#headright { float: right; font-size: 0.8em; } 
dt { float: left; font-weight: bold; } 
dd { margin-left: 4.5em; } 

结果是语义正确的HTML,更易于阅读,因此更容易在未来修改。 Supporting fiddle

+0

谢谢,这是如此接近!我希望中间部分能够被集中。这似乎很简单...如果我没有两个堆叠的盒子。我可能不得不放弃这个想法,因为它证明是如此痛苦。我试图使这个例子适应你的代码,但它工作可怕:) http://jsfiddle.net/m4pZz/ – Paul 2011-06-09 14:26:13

+1

是的,这很棘手。我在http://jsfiddle.net/TcRxp/25/上更新了解决方案,但是您应该知道它在IE7及更旧版本中不起作用。 – Kalessin 2011-06-09 16:59:00

相关问题