Question

尝试制作两列页面，这样我就可以得到两列信息。我不能使它正常工作。我有一张大桌子，占据了一半的页面，并向左推，但是我无法让另一部分在右边！它只是在下面。请您知道如何告诉我。对于学校项目，我必须这样做！这是我的代码：

	.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 ++中执行此操作，不确定是否会有所不同。

Answer 1

您只需要确保您的element标签在正确的位置关闭，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>

Answer 2

默认情况下，Div元素将显示为“块”元素，每行仅允许一个。下一个块级元素将显示在其下方。

将此CSS规则添加到.rowone和.rowtwo：display: inline;或display: inline-block;

编辑：MichaelvE的答案是正确的。浮动块级div将允许两个块出现在同一行上，就像内联元素一样。浏览代码时，我错过了开放标签。

如何通过记事本++在HTML5中创建两列页面

2 个答案: