努力使用float按预期排列元素

Question

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

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

全部嵌套在div“main-middle”下。

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

对我来说，主要的困惑是“如何报告”框（当前位于页面底部）不会随地图和类别过滤器一起浮动，它仍然位于这些元素的下方。如何报告框（div id =“content”）有一个“寄养”父母。它过去常常属于类别过滤器，我把它提升到一个水平，成为另一个提到的其他元素的兄弟。

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

链接位于：http://tinyurl.com/lnrtfdo

右列是应该的位置，地图将变得更薄（应该是中间）。地图下方的方法框应该是左栏，因此顶部与地图的顶部对齐（而地图将更薄）

现在在网站上地图太大而不能浮动，但是如果你将宽度调整为300px，则下面的元素，如何报告框，不会向上移动它保持原位。

这是每个元素的CURRENT CSS。添加浮点数：对每个浮点数都没有解决：

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;

如何在左上方的正确位置找到方法？

Answer 1

您的“如何报告”部分（.additional-content）位于#content内部，其固定宽度为960px ，上有一个clearfix类。我不确定为什么你会期望它在#map旁边漂浮，它是#content的兄弟。要使两个元素相邻，它们必须是兄弟姐妹。

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

---

更新：如果你做了所有这些，你可以让＃map和#content在一行上很好地发挥作用：

• 将#map设置为600px或更小并向右浮动（宽度：580px，边距右：20px工作正常）
• 在#map和#mapStatus
之后立即删除清除div
• 浮动#content left，将其宽度设置为auto，并删除其右边距

...

#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 */
}