0

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

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

我需要绿色框下方的橙色框，每个中心都与另一个对齐。“图例”（浮动到右侧）曾经处于同一级别，但现在已向下移动。

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

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

是的，我已经游说将一名设计师添加到团队中，但还没有发生。

谢谢，

保罗

4

5 回答 5

1

更新：结合@Jeremy B 的建议

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

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

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

本质上，布局的逻辑是

  1. 绘制右浮动内容
  2. 绘制左浮动内容
  3. 在中间绘制内容（因为它现在将呈现在浮动左侧内容的右侧。
于 2011-06-08T18:10:05.233 回答
1

首先使您的顶部跨度成为一个块元素以堆叠它们：

<span class="color status active bold" style="display:block">地位：</span>

然后将中间的 div 也向左浮动：

将 float:left 添加到 CSS 中的 #headmiddle

于 2011-06-08T18:25:39.197 回答
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，更易于阅读，因此将来更易于修改。支持小提琴。

于 2011-06-08T18:42:16.233 回答
0

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

我添加了以下内容：

#headmiddle span.status { display: block }

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

于 2011-06-08T18:12:08.463 回答
0

我通过将许多不同的来源放在一起得到它。亚历克斯科尔斯的解决方案是最接近蝙蝠的，但中间没有居中。它也比我的烂摊子干净得多。我从这篇文章的代码开始：

<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>

（上面的小提琴）

我采用了 Alex 清理的元素，这让我更接近我的目标，但中心色块太宽了。从这个问题中我了解了“最大宽度”，它最终成为我需要的最后一块……或者我是这么想的。

编辑： max-width 在 IE7 quirks 模式下不起作用（我必须支持）所以从这个页面我学会了如何调整我的 css 以在 IE7 quirks 模式、IE8 和 FF 下工作。

最终代码（小提琴）：

.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>

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

保罗

于 2011-06-09T16:50:46.333 回答