Question

我是webdesigner的新手，我必须创建一个包含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”内的三列下滑动。

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

这样做的正确方法是什么？

Answer 1

我认为你应该为你的DIV使用花车。之后移动它们会更容易。

Answer 2

使用display: table-*：

.Body { display: table; }
.Left, .Content, .VerticalBanner { display: table-cell; }

参见例如this JSfiddle

Answer 3

要阻止身体div崩溃，您可以使用

.body{ overflow: hidden; }

我认为你不需要绝对的位置。

Answer 4

<div class="Body">
   <div style="width:20%;float:left;">My menu</div>
   <div style="width:60%;float:left;">Foo body</div>
   <div style="width:20%;float:left;">My menu</div>
   <div style="height:1px;font-size:1px;clear:both;">&nbsp;</div>
</div>

CSS使用div来模拟表格

4 个答案: