0

我正在调整 CMS 上的模板。在主页上，我想从左到右排列的特定元素是（描述：元素名称/id/类）：

  • 如何报告框（div id="content"）
  • 地图（div id="map"）
  • 类别过滤器（div id="right"）

所有嵌套在 div "main-middle" 下。

这里没有发布相当大的 html 块，而是来自 Inspect Element 的页面结构屏幕：

在此处输入图像描述

对我来说主要的困惑是如何报告框（当前位于页面底部）不会与地图和类别过滤器一起浮动，它仍然位于这些元素下方。如何报告框（div id="content"）有一个“寄养”父母。它曾经生活在类别过滤器下，我将它提升到一个级别，与提到的其他两个元素成为同级。

我试过摆弄元素的现有边距、浮动和嵌套。

链接在这里：http ://tinyurl.com/lnrtfdo

右列是它应该在的位置，而将变薄的地图是它应该在的位置（中间）。地图下方的 How to Box 应该是左栏，因此顶部与地图顶部一致（而地图会更薄）

现在在网站上，地图太大而无法浮动，但如果您将宽度调整为 300 像素，下面的元素“如何报告框”不会向上移动，它会保持原位。

这是每个元素的当前 CSS。将 float:right 添加到每个都不能解决：

The Category Filters:
div#right {
width: 285px;
padding: 0;
float: right;
}

The Map
border: #999 1px solid;
width: 800px;
height: 366px;
position: relative;
height: 650px;
border-radius: 19px;

The Stubborn How to Box that Won't Float
div#main .withright div#content {
margin: 0 325px 0 0;
padding: 0;

如何将如何将盒子放入左上角的正确位置？

4

1 回答 1

1

您的“如何报告”部分 (.additional-content) 位于 #content 内，它的固定宽度为960 像素，并且上面有一个 clearfix 类。我不确定你为什么希望它漂浮在#map 旁边，它是#content 的兄弟。要使两个相邻的元素浮动，它们必须是兄弟元素。

您需要稍作备份并重新考虑您的布局。考虑使用display: inline-block而不是浮动，如果您实际上不需要浮动行为，这可能会出现问题。

更新：如果你做了所有这些，你可以让 #map 和 #content 在一行上很好地播放：

  • 将 #map 设置为 600px 宽或更小并使其向右浮动（宽度：580px 和 margin-right：20px 效果很好）
  • 删除紧跟在#map 和#mapStatus 之后的清除 div
  • 向左浮动#content，将其宽度设置为自动，并删除其右边距

...

#map {
    float: right;
    width: 580px;
    margin-right: 20px !important; /* better, remove !important from elsewhere */
}
#content {
    float: left;
    width: auto;
    margin-right: 0 !important; /* better, remove !important from elsewhere */
}
于 2013-10-04T19:26:17.053 回答