Question

我正在尝试将内容放在两个相邻的div元素中，但我在第一个div中有一个表，它会影响第二个div中内容的垂直位置。

这是我的HTML文件

＆＃13;

    .homepage{
    display: table;
    width: 100%;}

    .userarea {
	width: 50%;
    display: table-cell;}

    #area1{
	background-color: pink;}

    #area2{
	background-color: red;	}

    #rgttop{
	background-color: blue;}

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
	<title>Welcome</title>
	<link rel="stylesheet" type="text/css" href="beauty.css">
    </head>
    <body >
    <div class="homepage">

    <div class="userarea" id="area1">

	<table width="100%">
	<tbody>
	<tr>
	<td width="50%">
	<div >
		<p>Person 1: ABCD</p>
		<p>Person 2: QWRT</p>
		<p>Person 3: TYUI</p>
		<p>Person 4: FGHJ</p>
		<p>Person 5: BNMV</p>

	</div>
	</td>
	<td width="50%">
	<div >
		<p>Person 1: ABCD</p>
		<p>Person 2: QWRT</p>
		<p>Person 3: TYUI</p>
		<p>Person 4: FGHJ</p>
		<p>Person 5: BNMV</p>

	</div>

	</td>

	</tr>
	</tbody>
	</table>
    </div>

    <div class="userarea" id="area2">
	<div id="rgttop">
		Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
	</div>
    </div>
    </div>
    </body>
    </html>

＆＃13;

第一个div是id = area1，第二个div id = area2

问题在于div为id = rgttop。

有人可以解释为什么它会被转移以及如何正确定位它？

由于

Answer 1

你只需要漂浮.userarea。

.homepage{
    display: table;
    width: 100%;
}

.userarea {
	width: 50%;
    float: left;
    display: table-cell;
}

#area1{
	background-color: pink;
}

#area2{
	background-color: red;
}

#rgttop{
	background-color: blue;
}

<!DOCTYPE html>
    <html>
    <head>
	<title>Welcome</title>
	<link rel="stylesheet" type="text/css" href="beauty.css">
    </head>
    <body >
    <div class="homepage">

    <div class="userarea" id="area1">

	<table width="100%">
	<tbody>
	<tr>
	<td width="50%">
	<div >
		<p>Person 1: ABCD</p>
		<p>Person 2: QWRT</p>
		<p>Person 3: TYUI</p>
		<p>Person 4: FGHJ</p>
		<p>Person 5: BNMV</p>

	</div>
	</td>
	<td width="50%">
	<div>
	    <p>Person 1: ABCD</p>
		<p>Person 2: QWRT</p>
		<p>Person 3: TYUI</p>
		<p>Person 4: FGHJ</p>
		<p>Person 5: BNMV</p>
	</div>

	</td>

	</tr>
	</tbody>
	</table>
    </div>

    <div class="userarea" id="area2">
	<div id="rgttop">
		Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
	</div>
    </div>
    </div>
    </body>
    </html>

Answer 2

如何将 vertical-align：top; 添加到＃area2样式？

为什么第一个div中的表会影响第二个div中的内容位置？

2 个答案: