gpt4 book ai didi

html - 如何通过Notepad++在HTML5中创建两栏页面

转载 作者:太空宇宙 更新时间:2023-11-03 22:19:55 25 4
gpt4 key购买 nike

试图制作一个两栏页面,这样我就可以有两栏信息。我无法让它工作。我有一张大 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com