我正在调整 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;
如何将如何将盒子放入左上角的正确位置?