我正在尝试创建一个具有表格布局但不使用表元素的网页。我遇到的问题是，每当我将文本添加到任何布局更改中时。我不确定为什么会发生这种情况。下面的是代码。它是仅包含Divs和纯文本的布局的简化版本。我的颜色编码为div，使每个div都脱颖而出。
此代码中的两个版本是相同的。唯一的区别是第二个将文本添加到其中。请注意，当添加文本时，DIVS如何向下移动。有人可以解决为什么会发生这种情况吗？
事先感谢您可能会给我的任何帮助。
petem
* css *
.content {
margin: 0px auto; /*center the content all browsers except IE*/
text-align: center; /*center the content IE*/
width: 1212px;
}
body { background-color:yellow; }
.table{ display: table; width: 1212px; }
.row-one { display: table-row; width: 1212px; }
.column-one { display: table-cell; width: 256px; }
.column-two { display: table-cell; width: 956px; }
.image-one {
height: 256px;
width: 256px;
background-color:red;
}
.image-two {
height: 256px;
width: 256px;
background-color:green;
}
.image-three {
height: 256px;
width: 256px;
background-color:purple;
}
.image-four {
height: 256px;
width: 256px;
background-color:tan;
}
.image-five {
height: 256px;
width: 256px;
background-color:maroon;
float:right;
}
.top-middle {
background-color:pink;
width: 700px;
height: 256px;
}
.bottom-right {
width: 956px;
height: 768px;
background-color:blue;
}
html *
<div class="content">
<header>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</header>
<div class="table"><!--table-->
<div class="row-one"><!--table row 1-->
<div class="column-one"><!--table COL 1-->
<div class="image-one"></div>
<div class="image-two"></div>
<div class="image-three"></div>
<div class="image-four"></div>
</div><!--END table COL 1-->
<div class="column-two"><!--table COL 2-->
<div class="image-five"></div>
<div class="top-middle">
Welcome to My Home on the Web!<br />
<br />
I am a Multimedia Computer Programmer and Web Designer and I am currently living in New York City.<br />
<br />
Hello to all of the visitor's to this site. It is designed to be a place to view all of my current projects.<br />
<br />
Below are links to games and multimedia projects that I have recently created...
</div>
<div class="bottom-right">
list item 1<br />
list item 2<br />
list item 3<br />
list item 4<br />
list item 5<br />
</div>
</div><!--END table COL 2-->
</div><!-- END table row 1-->
</div><!--END table-->
<footer>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</footer>
</div> <!-- END content -->
* html w/o文本
<div class="content">
<header>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</header>
<div class="table"><!--table-->
<div class="row-one"><!--table row 1-->
<div class="column-one"><!--table COL 1-->
<div class="image-one"></div>
<div class="image-two"></div>
<div class="image-three"></div>
<div class="image-four"></div>
</div><!--END table COL 1-->
<div class="column-two"><!--table COL 2-->
<div class="image-five"></div>
<div class="top-middle"></div>
<div class="bottom-right"></div>
</div><!--END table COL 2-->
</div><!-- END table row 1-->
</div><!--END table-->
<footer>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</footer>
</div> <!-- END content -->
* html使用表元素这是使用表元素的同一页面。请注意，即使其中有文本，所有dif如何正确排列。无论此问题是什么，它可能与显示：表格属性有关。以这种方式编写代码，一切看起来都正确，除了两列之间有边框间距。我不确定是什么原因引起的。
<div class="content">
<header>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</header>
<table><!--table-->
<tr><!--table row 1-->
<td><!--table COL 1-->
<div class="image-one"></div>
<div class="image-two"></div>
<div class="image-three"></div>
<div class="image-four"></div>
</td><!--END table COL 1-->
<td><!--table COL 2-->
<div class="image-five"></div>
<div class="top-middle">
Welcome to My Home on the Web!<br />
<br />
I am a Multimedia Computer Programmer and Web Designer and I am currently living in New York City.<br />
<br />
Hello to all of the visitor's to this site. It is designed to be a place to view all of my current projects.<br />
<br />
Below are links to games and multimedia projects that I have recently created...
</div>
<div class="bottom-right">
list item 1<br />
list item 2<br />
list item 3<br />
list item 4<br />
list item 5<br />
</div>
</td><!--END table COL 2-->
</tr><!-- END table row 1-->
</table><!--END table-->
<footer>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</footer>
</div> <!-- END content -->
我看不到任何附加代码。但是，我想您的问题可能与添加文本时有关。只是基于描述的猜测。