Question

在页面的顶部，我有两个div，一个浮动到左边，一个浮动到右边。我可以在它们之间放置带边框的文本，但是，我现在需要在它们之间堆叠两个这样的文本区域。

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

我需要绿色框下面的橙色框，每个中心与另一个中心对齐。 “传奇”（浮动到右边）曾经处于同一水平但现在向下移动。

我尝试在混合中添加另一个表，但这没有帮助。

原谅标记 - 我知道，这不是真正的光滑。随着时间的推移，有些人已经触及过这一点，我们都不是这方面的大师。

是的，我曾游说设计师加入团队但尚未发生。

谢谢，

保

Answer 1

更新：纳入@Jeremy B的建议

是否必须通过CSS更改？在处理这样的场景时，您需要注意HTML元素的定义顺序。

请查看此处的修改：http://jsfiddle.net/TcRxp/8/

通过改变三个DIV的顺序并使用@Jeremy B的CSS建议，我能够实现你所需要的东西

基本上，布局的逻辑是

绘制浮动内容
绘制浮动左侧内容
在中间绘制内容（因为它现在将呈现在左侧浮动内容的右侧。

Answer 2

首先让你的顶部跨越一个块元素来堆叠它们：

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

然后将中间div向左漂浮：

在你的css中添加float：left到#headmiddle

Answer 3

当你将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

Answer 4

如果您需要使用CSS，请参阅我的更改：Fiddle

我添加了以下内容：

#headmiddle span.status { display: block }

这将导致您的跨度“堆叠”。

Answer 5

我通过组合许多不同的来源得到它。亚历克斯科尔斯的解决方案最接近蝙蝠，但中间没有居中。它比我的混乱更干净。我从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）

我把元素Alex清理干净了，这让我更接近目标，但中心颜色块太宽了。从this question开始，我学到了“最大宽度”，这最终成为了我需要的最后一件......或者我想到了。

编辑：max-width在IE7怪癖模式下不起作用（我必须支持）所以从this page我学会了如何调整我的css以在IE7怪癖模式，IE8和FF中工作。< / p>

最终代码（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>

感谢所有出色的答案 - 我从这个问题中学到了很多东西。

保

使用CSS，如何在两个浮动div之间堆叠两个跨度？

5 个答案: