html - CSS使用div模拟表格

Question

我是新来的网页设计师，我必须创建一个包含 3 列的页面部分:左侧的菜单、中央正文和垂直横幅。我不会使用表格，所以我创建了一个类似的 HTML:

<div class="Body">
   <div class="LeftMenu">My menu</div>
   <div class="Content">Foo body</div>
   <div class="VerticalBanner">My menu</div>
</div>

虽然 CSS:

.LeftMenu {
width: 20%;
}
.Content {
margin: auto;
left: 20%;
position: absolute;
top: 0px;
width: 60%;
}
.VerticalBanner {
left: 80%;
margin: auto;
position: absolute;
top: 0%;
width: 20%;
}

因此，我使用该代码时遇到的问题是父 div(Body)采用第一个 div(LeftMenu)的高度，但不是更大的那个。这会导致“Content”和“VerticalBanner”的内容流出“Body”并进入 Footer div 下方。如果我使用 float 属性，“Body”div 会折叠而没有尺寸，然后页脚 div 会滑到“Body”内的三列下方。

我也试过显示属性，但是 Internet Explorer 不支持这个并且有些列有奇怪的行为。

正确的做法是什么？

Answer 1

我认为您应该为 DIV 使用 float 。之后移动它们就容易多了。