试图制作一个两栏页面，这样我就可以有两栏信息。我无法让它工作。我有一张大 table ，它占据了页面的一半并被推到左边，但我无法让另一部分放在右边!它只是在下面。如果你知道怎么告诉我，请告诉我。我必须为学校元素做这个!这是我的代码:
.body {
font-family: "Bookman Old Style";
background:url('https://i.gifer.com/7sav.gif');
color: white;
}
<!--backup background-color: #D10F0F;-->
.table {
background-color: #B6B6B6;
font-size: 17px;
border-color: white;
}
.header {
}
.rowone {
float: left;
width: 50%;
}
.rowtwo:after {
content: "";
display: table;
clear: both;
float: right;
}<!DOCTYPE html>
<html>
<head>
<title>My Typical Day</title>
</head>
<body class="body">
<div class="header">
<center>
<!--Header-->
<h1><u>My Typical Day</u></h1>
<h4><u>By: Taylor Sloan</u></h4>
</div>
<!--End Of Header-->
<center>
<!--Table Start (ROW 1)-->
<div class="rowone">
<table border="2" bordercolor="white" class="table">
<tr>
<td><strong>Hour</strong></td>
<td><strong>Class</strong></td>
<td><strong>Teacher</strong></td>
<td><strong>Image</strong></td>
</tr>
<tr>
<td>1</td>
<td>Spanish 2.5</td>
<td>Córdoba</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>2</td>
<td>Wood Technologies I</td>
<td>Cortez</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>3</td>
<td>Honors Geometry</td>
<td>Alexander</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>4</td>
<td>Honors Biology</td>
<td>Martens</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>5</td>
<td>Honors English Language Arts</td>
<td>McCrossen</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>6</td>
<td>Physical Education</td>
<td>Lowe</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>7</td>
<td>Web Design</td>
<td>Foster</td>
<td><!--TAKEN OUT--></td>
</tr>
<table>
</div>
<!--Table End-->
<!--ROW2 STARTS-->
<div class="rowtwo">
<h3>My Top Three Favorite Books and Why</h3>
<ol>
<li>The Dragon Inside Series</li>
</ol>
</div>
<h5><em>Email Me!</em></h5>
</div>
</center>
</body>
</html>谁能告诉我如何修复它并附上工作版本？我也在 Notepad++ 中执行此操作，不确定这是否有所作为。
最佳答案
您只需要确保您的元素标签在正确的位置关闭，CENTER、DIV 和 TABLE 标签都需要正确关闭。
此外，CENTER 标签现已弃用，建议您使用 CSS 使元素居中，例如 text-align: center
body {
font-family: "Bookman Old Style";
background: url('https://i.gifer.com/7sav.gif');
color: white;
}
<!--backup background-color: #D10F0F;
-->.table {
background-color: #B6B6B6;
font-size: 17px;
border-color: white;
}
.header {}
.rowone {
float: left;
width: 50%;
}
.rowtwo:after {
content: "";
display: table;
clear: both;
float: right;
}<div class="header">
<center>
<!--Header-->
<h1><u>My Typical Day</u></h1>
<h4><u>By: Taylor Sloan</u></h4>
</center>
</div>
<!--End Of Header-->
<center>
<!--Table Start (ROW 1)-->
<div class="rowone">
<table border="2" bordercolor="white" class="table">
<tr>
<td><strong>Hour</strong></td>
<td><strong>Class</strong></td>
<td><strong>Teacher</strong></td>
<td><strong>Image</strong></td>
</tr>
<tr>
<td>1</td>
<td>Spanish 2.5</td>
<td>Córdoba</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>2</td>
<td>Wood Technologies I</td>
<td>Cortez</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>3</td>
<td>Honors Geometry</td>
<td>Alexander</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>4</td>
<td>Honors Biology</td>
<td>Martens</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>5</td>
<td>Honors English Language Arts</td>
<td>McCrossen</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>6</td>
<td>Physical Education</td>
<td>Lowe</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>7</td>
<td>Web Design</td>
<td>Foster</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
</table>
</div>
<!--Table End-->
<!--ROW2 STARTS-->
<div class="rowtwo">
<h3>My Top Three Favorite Books and Why</h3>
<ol>
<li>The Dragon Inside Series</li>
</ol>
</div>
<div>
<h5><em>Email Me!</em></h5>
</div>
</center>关于html - 如何通过Notepad++在HTML5中创建两栏页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54411918/